Web Components with Vite
A progressive path in 8 lessons. Each lesson points to editable examples and ready snippets.
1Why Web Components
Native browser components, framework-agnostic — the problem they solve.2Custom Element + Shadow DOM
class extends HTMLElement, define(), attachShadow, and encapsulated styles.3Image gallery (vanilla CE)
A full image-gallery with only a Custom Element + Shadow DOM.4Same gallery in React
Use the Custom Element inside JSX — props become attributes.5Same gallery in Vue
Mount the Custom Element in a Vue 3 app (global CDN build).6Package with Vite (lib mode)
Package tree, vite.config library mode, and Custom Element entry.7Dual export: ES module + Custom Element
Export the class and register the tag — two ways to consume the same lib.8Consume the lib in a Vite app
ESM import + tag in HTML/JSX — full cycle from package to app.
Native browser components, framework-agnostic — the problem they solve.2Custom Element + Shadow DOM
class extends HTMLElement, define(), attachShadow, and encapsulated styles.3Image gallery (vanilla CE)
A full image-gallery with only a Custom Element + Shadow DOM.4Same gallery in React
Use the Custom Element inside JSX — props become attributes.5Same gallery in Vue
Mount the Custom Element in a Vue 3 app (global CDN build).6Package with Vite (lib mode)
Package tree, vite.config library mode, and Custom Element entry.7Dual export: ES module + Custom Element
Export the class and register the tag — two ways to consume the same lib.8Consume the lib in a Vite app
ESM import + tag in HTML/JSX — full cycle from package to app.