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
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
[editar | editar código]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: 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);
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: 0.5rem;
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
- ↑ «webcomponents.org». www.webcomponents.org. Consultado em 14 de dezembro de 2023
- ↑ 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
Ligações externas
[editar | editar código]- 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