Por qué Web Components

Componentes nativos del navegador, agnósticos a frameworks — el problema que resuelven.

TODO i18n: Traducción completa pendiente. Título y descripción localizados; el cuerpo permanece en portugués por ahora.

Frameworks vêm e vão. O DOM e os padrões da plataforma ficam.

O problema

Você criou um botão de mídia (ou uma galeria) em React. O time de marketing usa Vue. O site institucional é HTML estático. Três reescritas do mesmo componente?

Web Components empacotam UI + comportamento numa tag HTML real (<image-gallery>), que qualquer app pode montar.

Peças da plataforma

API	Papel
Custom Elements	Registrar uma classe que estende `HTMLElement`
Shadow DOM	Encapsular markup e CSS do componente
HTML templates / slots	Compor conteúdo externo dentro do componente

Quando fazem sentido

Design system compartilhado entre apps
Widgets embutíveis (CMS, sites estáticos, microfrontends)
Libs de UI sem amarrar o consumidor a um framework

Quando não são a melhor escolha: apps 100% React com ecossistema só de hooks — às vezes um componente React puro é mais simples. A trilha mostra os dois mundos: CE nativo e consumo em React/Vue.

Próximo passo

Na lição 2 você cria o primeiro Custom Element com Shadow DOM.