Web Components con Vite
Un camino progresivo en 8 lecciones. Cada clase apunta a ejemplos editables y snippets listos.
1Por qué Web Components
Componentes nativos del navegador, agnósticos a frameworks — el problema que resuelven.2Custom Element + Shadow DOM
class extends HTMLElement, define(), attachShadow y estilos encapsulados.3Galería de imágenes (vanilla CE)
Una image-gallery completa solo con Custom Element + Shadow DOM.4La misma galería en React
Usar el Custom Element dentro de JSX — props se vuelven atributos.5La misma galería en Vue
Montar el Custom Element en una app Vue 3 (build global vía CDN).6Empaquetar con Vite (lib mode)
Árbol del paquete, vite.config en library mode y entry del Custom Element.7Export dual: ES module + Custom Element
Exportar la clase y registrar la etiqueta — dos formas de consumir la misma lib.8Consumir la lib en una app Vite
Import ESM + etiqueta en HTML/JSX — el ciclo completo del paquete a la app.
Componentes nativos del navegador, agnósticos a frameworks — el problema que resuelven.2Custom Element + Shadow DOM
class extends HTMLElement, define(), attachShadow y estilos encapsulados.3Galería de imágenes (vanilla CE)
Una image-gallery completa solo con Custom Element + Shadow DOM.4La misma galería en React
Usar el Custom Element dentro de JSX — props se vuelven atributos.5La misma galería en Vue
Montar el Custom Element en una app Vue 3 (build global vía CDN).6Empaquetar con Vite (lib mode)
Árbol del paquete, vite.config en library mode y entry del Custom Element.7Export dual: ES module + Custom Element
Exportar la clase y registrar la etiqueta — dos formas de consumir la misma lib.8Consumir la lib en una app Vite
Import ESM + etiqueta en HTML/JSX — el ciclo completo del paquete a la app.