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.[1]
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; #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: 8px; 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);
E o uso:
<my-counter start="5"></my-counter>
Ou com Declarative Shadow DOM (DSD) para uso com Server-Side Rendering (SSR):[2]
<my-counter start="5"> <template shadowrootmode="open"> <style> :host { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100vh; } .label { font: 1.125rem Noto, sans-serif; } </style> <span class="label">Encerra em 5 cliques.</span> <button>Contar</button> </template> </my-counter>
Referências
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
Este artigo sobre programação de computadores é um esboço. Você pode ajudar a Wikipédia expandindo-o.
|