Vanilla Ticker

vanilla-ticker.js

const template = document
  .createElement("template");
template.innerHTML = `<span></span>`;

class MyTicker extends HTMLElement {
  constructor() {
    super();
    this.ticks = 0;
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(
      template.content.cloneNode(true)
    );
    this.spanValue = shadowRoot
      .querySelector("span");
  }

  update() {
    this.spanValue.innerText = this.ticks;
  }

  tick() {
    setTimeout(() => {
      this.ticks += 1;
      this.update();
      this.tick();
    }, 1000);
  }

  connectedCallback() {
    this.update();
    this.tick();
  }
}