Web Components: Componentes Reutilizáveis para Web

Web Components são padrões nativos do navegador para criar componentes reutilizáveis. Funcionam em qualquer framework ou sem framework. Este guia apresenta as tecnologias e como usá-las.

O Que São Web Components

Definição

Conjunto de padrões para componentes encapsulados.

Tecnologias

Custom Elements, Shadow DOM, HTML Templates.

Nativo

Suportado diretamente pelos navegadores.

Framework Agnostic

Funciona com React, Vue, Angular ou puro.

Por Que Web Components

Reutilização

Um componente, qualquer projeto.

Encapsulamento

Estilos não vazam.

Padrões

Não depende de biblioteca.

Longevidade

Navegadores suportam, não depreca.

Custom Elements

O Que É

Define novos elementos HTML.

Sintaxe

class MyElement extends HTMLElement { } customElements.define('my-element', MyElement);

Lifecycle

connectedCallback, disconnectedCallback, attributeChangedCallback.

Uso

Shadow DOM

O Que É

DOM encapsulado dentro do elemento.

Encapsulamento

CSS não vaza para fora ou entra de fora.

Criação

this.attachShadow({ mode: 'open' });

Slots

para projeção de conteúdo.

HTML Templates

O Que É

Fragmentos HTML que não renderizam até clonar.

Sintaxe

Uso

Clone e adicione ao DOM.

Performance

Não renderiza até necessário.

Lifecycle Callbacks

connectedCallback

Quando adicionado ao DOM.

disconnectedCallback

Quando removido do DOM.

attributeChangedCallback

Quando atributo muda.

adoptedCallback

Quando movido para novo documento.

Atributos e Propriedades

Atributos

Strings no HTML.

Propriedades

Valores JavaScript no objeto.

Sincronização

Refletir entre ambos.

observedAttributes

static get observedAttributes() { return ['value']; }

Slots

Default Slot

recebe todo conteúdo.

Named Slots

Uso

...

Fallback

Conteúdo dentro do slot é fallback.

Estilização

Shadow DOM Styles

Estilos dentro do shadow root.

:host

Estiliza o elemento host.

::slotted

Estiliza conteúdo slotted.

CSS Parts

::part() para customização externa.

CSS Variables

Passam através do shadow boundary.

Com Frameworks

React

Pode usar com wrapper.

Vue

Suporte nativo para custom elements.

Angular

CUSTOM_ELEMENTS_SCHEMA.

Lit

Biblioteca para facilitar criação.

Lit Element

O Que É

Biblioteca do Google para Web Components.

Benefícios

Menos boilerplate, reactive properties.

Templating

Tagged template literals.

Adoção

Popular para Web Components.

Stencil

O Que É

Compiler para Web Components.

JSX

Sintaxe familiar para React devs.

TypeScript

Suporte nativo.

Lazy Loading

Otimização automática.

Browser Support

Moderno

Todos browsers modernos suportam.

Polyfills

Para browsers antigos.

Verificação

https://caniuse.com/custom-elementsv1

Testing

Unit Tests

Jest, Mocha com DOM.

Web Test Runner

Modern testing for web components.

Open WC

Ferramentas de teste.

Performance

Initial Cost

Overhead de shadow DOM.

Scaling

Muitos componentes são eficientes.

Bundle

Componentes carregam sob demanda.

Erros Comuns

Forget Super

super() no constructor.

Attribute vs Property

Confundir os dois.

Heavy Constructor

Muito trabalho no constructor.

Style Leaking

Sem usar Shadow DOM.

Casos de Uso

Design Systems

Componentes compartilhados.

Microfrontends

Integração de partes independentes.

Third-Party Widgets

Embed em qualquer site.

Legacy Integration

Modernizar gradualmente.

Conclusão

Web Components são padrões poderosos para componentes verdadeiramente reutilizáveis. Funcionam hoje em todos os browsers modernos e complementam qualquer stack.

FAQs

1) Web Components substituem React? Não necessariamente. Podem coexistir.

2) Preciso de Lit ou Stencil? Ajudam, mas pure vanilla funciona.

3) SEO funciona com Shadow DOM? Google renderiza JavaScript. Geralmente funciona.

4) Performance é boa? Sim. Navegadores otimizaram.

5) Quando usar Web Components? Componentes compartilhados entre projetos/frameworks.