Intro & Custom Elements
The three pillars; defining and using your first custom element. Start →
Web Components — From Zero to Hero
A standalone, beginner→advanced course on Web Components — the browser-native, framework-agnostic component model. Custom Elements, Shadow DOM, slots, styling, events, and Lit — every example renders right in the page.
What you’ll learn
Section titled “What you’ll learn”Lifecycle Callbacks
constructor, connected/disconnected, observed attributes, upgrade. Learn →
Shadow DOM
attachShadow, encapsulation, open vs closed, :host & the boundary. Encapsulate →
Templates & Slots
Inert templates, default & named slots, slotchange & assigned nodes. Project →
Styling
:host, ::slotted, ::part, custom properties, adoptedStyleSheets. Style →
Attributes, Properties & Events
Reflection, properties vs attributes, CustomEvent, composed events. Wire up →
Patterns & Composition
Composition, form-associated elements, a11y, declarative shadow DOM. Compose →
Lit & Tooling
Lit (reactive props, lit-html, scoped styles), using WC in frameworks, distribution. Level up →
How this course works
Section titled “How this course works”Renders in your browser
A live preview runs each custom element — Shadow DOM, slots, and styling appear right there, no setup.
Diagrams that explain
The shadow tree, slot projection, attribute↔property reflection, and event composition as Mermaid diagrams.
Vanilla first, then Lit
Learn the platform APIs from scratch, then see how Lit makes them ergonomic — both render live.
Bilingual + read mode
English and ไทย, quizzes with saved progress, and a distraction-free read mode.