Componentes Web

Componentes Web são um conjunto de normas atualmente sendo produzidos por engenheiros do Google como também uma especificação da W3C que permitem a criação de componentes reutilizáveis em documentos e aplicações web. A intenção por trás deles é trazer a engenharia de software baseada em componentes para a Web. O modelo de componentes permite encapsulamento e interoperabilidade de elementos HTML individuais.

O suporte para os componentes web está presente nos principais navegadores web, com polyfills disponíveis para os demais sem suporte.

Componentes Web consistem em 4 elementos principais que podem ser utilizados em conjunto ou separadamente:

• Elementos personalizados
• Sombra do DOM
• Importação de HTML
• Modelos HTML

Exemplo

A definição do componente:

export class MyCounter extends HTMLElement {
  #count;
  #p;
  #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;
            height: 100vh;
          }
          p {
            font: 1.125rem Noto, sans-serif;
          }
        </style>
        <p></p>
        <button>Contar</button>`;
    }
    this.#p = this.shadowRoot.querySelector('p');
    this.#button = this.shadowRoot.querySelector('button');
    this.#button.addEventListener('click', this.decrement.bind(this));
    this.requestUpdate();
  }

  requestUpdate() {
    this.#p.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);

E o uso:

<my-counter start="5"></my-counter>

Ou com Declarative Shadow DOM (DSD) para uso com Server-Side Rendering (SSR):

<my-counter start="5">
  <template shadowrootmode="open">
    <style>
      :host {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
      p {
        font: 1.125rem Noto, sans-serif;
      }
    </style>
    <p>Encerra em 5 cliques.</p>
    <button>Contar</button>
  </template>
</my-counter>

Ligações externas

• Especificações dos Componentes Web no GitHub
• «Web Components» (em inglês). Documentação no MDN 
• «Lit» (em inglês). Biblioteca para criação de componentes 
• «Stencil» (em inglês). Biblioteca para criação de componentes