<x-timer> with ELEMENT

by WebComponents

HTML

<h2>Dynamic timers</h2>
<x-timers></x-timers>

<script>
  customElements.define("x-timer", class extends HTMLElement {
    connectedCallback() {
      this.count = 0;
      this.id = setInterval(() => this.querySelector("b").innerHTML = ++this.count, 1000);
      this.innerHTML = `New timer id: ${this.id} seconds: <b>0</b><br>`;
    }
    disconnectedCallback() {
      clearInterval(this.id);
    }
  })
  customElements.define('x-timers', class extends HTMLElement {
    connectedCallback() {
      const ELEMENT = (tag, props)       => Object.assign(document.createElement(tag), props);
      const BUTTON  = (innerHTML, props) => ELEMENT("BUTTON", { innerHTML, ...props });
      const DIV     = ELEMENT("DIV", { innerHTML: "No timers running" });
      const clearTimers = () => DIV.innerHTML = "";
      this.append( 
                  BUTTON(`Add timer`, {
                    onclick: (evt) => {
                      if ( !this.querySelector("x-timer") ) clearTimers();
                      DIV.append(ELEMENT("x-timer"));
                    }
                  }),
                  BUTTON(`Clear timers`, {
                    onclick: clearTimers
                  }),
                  DIV
      );
    }
  });
</script>