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:

Exemplo

A definição do componente:

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

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

  get text() {
    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;
        gap: 0.5rem;
        height: 100vh;
      }
      [part~=label] {
        font: 1.125rem Noto, sans-serif;
      }
    </style>
    <data part="label" value="5">Encerra em 5 cliques.</data>
    <button part="count">Contar</button>
  </template>
</my-counter>

Referências

  1. ↑ «webcomponents.org». www.webcomponents.org. Consultado em 14 de dezembro de 2023. Cópia arquivada em 28 de julho de 2026
  2. ↑ Miller, Jason; Freed, Mason (17 de fevereiro de 2024). «Declarative Shadow DOM». developer.chrome.com (em inglês). Consultado em 2 de março de 2024. Cópia arquivada em 16 de julho de 2024

Ligações externas

Ícone de esboço Este artigo sobre programação de computadores é um esboço. Você pode ajudar a Wikipédia expandindo-o.