draft

8-web-components/2-custom-elements/1-custom-timer/live-timer.js

@@ -0,0 +1,32 @@
+class LiveTimer extends HTMLElement {
+
+  render() {
+    this.innerHTML = `
+    <time-formatted hour="numeric" minute="numeric" second="numeric">
+    </time-formatted>
+    `;
+
+    this.timerElem = this.firstElementChild;
+  }
+
+  connectedCallback() { // (2)
+    if (!this.rendered) {
+      this.render();
+      this.rendered = true;
+    }
+    this.timer = setInterval(() => this.update(), 1000);
+  }
+
+  update() {
+    this.date = new Date();
+    this.timerElem.setAttribute('datetime', this.date);
+    this.dispatchEvent(new CustomEvent('tick', { detail: this.date }));
+  }
+
+  disconnectedCallback() {
+    clearInterval(this.timer); // important to let the element be garbage-collected
+  }
+
+}
+
+customElements.define("live-timer", LiveTimer);