Web Components com Vite
Um caminho progressivo em 8 lições. Cada aula aponta para exemplos editáveis e snippets prontos.
1Por que Web Components
Componentes nativos do browser, agnósticos a framework — o problema que resolvem.2Custom Element + Shadow DOM
class extends HTMLElement, define(), attachShadow e estilos encapsulados.3Galeria de imagens (vanilla CE)
Um image-gallery completo só com Custom Element + Shadow DOM.4Mesma galeria no React
Usar o Custom Element dentro de JSX — props viram atributos.5Mesma galeria no Vue
Montar o Custom Element num app Vue 3 (global build via CDN).6Empacotar com Vite (lib mode)
Árvore do pacote, vite.config em library mode e entry do Custom Element.7Export dual: ES module + Custom Element
Exportar a classe e registrar a tag — dois jeitos de consumir a mesma lib.8Consumir a lib em app Vite
Import ESM + tag no HTML/JSX — o ciclo completo do pacote ao app.
Componentes nativos do browser, agnósticos a framework — o problema que resolvem.2Custom Element + Shadow DOM
class extends HTMLElement, define(), attachShadow e estilos encapsulados.3Galeria de imagens (vanilla CE)
Um image-gallery completo só com Custom Element + Shadow DOM.4Mesma galeria no React
Usar o Custom Element dentro de JSX — props viram atributos.5Mesma galeria no Vue
Montar o Custom Element num app Vue 3 (global build via CDN).6Empacotar com Vite (lib mode)
Árvore do pacote, vite.config em library mode e entry do Custom Element.7Export dual: ES module + Custom Element
Exportar a classe e registrar a tag — dois jeitos de consumir a mesma lib.8Consumir a lib em app Vite
Import ESM + tag no HTML/JSX — o ciclo completo do pacote ao app.