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.

Start here Jump to Shadow DOM

What you’ll learn

Intro & Custom Elements

The three pillars; defining and using your first custom element. Start →

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

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.

Verified against (2026)

Custom Elements v1 / Shadow DOM v1 / HTML Templates — Baseline Widely Available, supported in all current Chrome, Firefox, Safari, and Edge.
Customized built-ins (is=) — still not supported in Safari; autonomous elements (extends HTMLElement) are the portable choice.
Declarative Shadow DOM (shadowrootmode) — cross-browser since Chrome/Edge 111, Safari 16.4, Firefox 123 (early 2024). Don’t confuse it with the older, non-standard shadowroot attribute that only ever existed in Chrome 90–110.
:host-context() — Chromium-only, and removed from the CSS spec; use CSS custom properties or container style queries instead.
Lit — version 3.x, ~5 KB. Polymer (Google’s earlier library) is deprecated in favor of Lit.