Componentes Web

export class MyCounter extends HTMLElement {
  #count;
  #span;
  #button;

  connectedCallback() {
    const start = Number(this.getAttribute('start'));
    this.#count = Math.max(0, start || 5);

    // Se não possuir Declarative Shadow Root
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' }).innerHTML = `
        <style>
          :host {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            height: 100vh;
          }
          .label {
            font: 1.125rem Noto, sans-serif;
          }
        </style>
        <span class="label"></span>
        <button>Contar</button>
      `;
    }
    this.#span = this.shadowRoot.querySelector('.label');
    this.#button = this.shadowRoot.querySelector('button');
    this.#button.addEventListener('click', this.decrement.bind(this));
    this.requestUpdate();
  }

  requestUpdate() {
    this.#span.textContent = this.label;
    this.#button.disabled = this.#count === 0;
  }

  get label() {
    switch (this.#count) {
      case 0: return `Fim.`;
      case 1: return `Encerra no próximo clique!`;
      default: return `Encerra em ${this.#count} cliques.`;
    }
  }

  decrement() {
    if (this.#count > 0) {
      this.#count--;
    }
    this.requestUpdate();
  }
}
customElements.define('my-counter', MyCounter);