Web Components from scratch
From your first custom element to a fully encapsulated, themeable component library — no build tools, no framework, start to finish. Nine lessons that leave you fluent in the platform.
- 9 lessons
- ~4 hours
- No build tools
- Beginner → Intermediate
Define real custom elements
Lifecycle, attributes, and properties — the parts of the platform every framework wraps.
Encapsulate with Shadow DOM
Styles and markup that can't leak or be leaked into — with slots for composition.
Theme without a framework
Custom properties and ::part to skin a whole library from one sheet.
Nine lessons, start to ship
- 22 min →
Your first custom elementFree preview
customElements.define, the four lifecycle callbacks, and a working element in ten lines.
- 26 min
The Shadow DOM
Attach a shadow root, understand encapsulation, and project light DOM with slots.
- 24 min
Templates & efficient rendering
Use <template> and cloneNode to render once and update cheaply — no innerHTML thrash.
- 28 min
Attributes, properties & reflection
observedAttributes, attributeChangedCallback, and keeping the two in sync the right way.
- 25 min
Events & communication
Custom events, bubbling and the composed flag — how components talk across shadow boundaries.
- 30 min
Styling & theming
:host, ::part and custom properties — skin an entire component set from one token sheet.
- 27 min
State without a framework
Wire a tiny reactive core into your elements — the 25-line signals engine from the lab.
- 26 min
Composition & patterns
Build components out of components, lean on slots, and avoid the traps that bite at scale.
- 32 min
Shipping a component library
Package, version, and document your set so any project — framework or not — can drop it in.
What you'll need
Comfortable JavaScript. Functions, classes, and the DOM. No TypeScript required.
A browser and a text editor. That's the whole toolchain — no Node, no bundler, no install step.
No framework experience. If you know React, great; if you don't, even better — fewer habits to unlearn.
Taught by the Terrarium Labs team
The same people who ship web components in production. Free, self-paced, yours to keep.