Slot Composition & Content Projection
The flattened tree, the assignment algorithm, and why reading projected content at connection time returns nothing.
Production-Focused Resource
Web Components & Framework-Agnostic UI Architecture
A practical, implementation-heavy reference for UI engineers building resilient component systems on native web platform primitives. Every page is grounded in the normative specification, illustrated with hand-authored diagrams, and written around code you can run rather than pseudocode you cannot.
The library now spans 85 pages across three sections — component architecture, styling and theming, and distribution and testing — organised from broad overviews down to single-problem deep dives. Each section page links to its topics; each topic links to the specific failures it covers.
Recent additions cover slot composition and the flattened tree, observer teardown and memory safety, container queries inside shadow trees, custom states as a styling channel, and the manifest and type declarations a published component package needs.
Observer Teardown & Memory Safety
What actually retains a detached component, one signal for every listener, and how to measure that it was released.
Container Queries in Components
Making the host its own query container, the containment that comes with it, and the side effects to plan for.
Custom States & State-Driven Styling
A styling channel only the component can write, invisible to the DOM and immune to a framework re-render.
Types & the Custom Elements Manifest
The generated artefacts that give consumers autocomplete, real types in JSX, and documentation that cannot drift.
Custom Element Registry & Definition
Deterministic registration, retroactive upgrade, scoped registries, and separating a class from its tag.
Shadow DOM Construction & Modes
Every attachShadow option, what each fixes permanently, and how to build a tree without re-parsing it per instance.
Lifecycle Callbacks Deep Dive
What each reaction may assume, why a move runs two of them, and coordinating components without relying on order.
Attribute Reflection & Property Sync
Deciding which side owns a value, breaking reflection loops without guard flags, and the pre-upgrade shadowing trap.
Event Composition & Bubbling
The two flags that decide reach, retargeting and composedPath(), and designing an event as versioned API.
Form-Associated Custom Elements
Submitting a value, declaring validity, and answering the four form lifecycle callbacks a native control handles for free.
Accessibility & Focus Management
Where semantics should live, focus delegation across the boundary, and the ID-reference problem shadow DOM creates.
Framework Integration & Adapters
The three gaps every adapter closes for React, Vue, and Angular — and why they belong outside the component.
CSS Scoping in Shadow DOM
The selector surface a shadow tree actually has, cascade layers inside it, and why tree order decides ties.
CSS Variables & Custom Properties
Token tiers that survive a redesign, registered properties, and reading or writing tokens from script.
Part & Slotted Selectors
Choosing between a part, a token, and nothing — plus forwarding parts through nested components.
Scoped Styles & Constructable Stylesheets
One parse for a thousand instances, layering sheets as an array, and rebuilding across documents.
Theme Inheritance & Light-DOM Styling
What crosses the boundary and what stops at it, and a theme switch that re-parses nothing.
Performance Optimization for Styles
The three levers that matter, budgets worth holding to, and the optimisations not worth making.
Packaging & Publishing
The exports map as public API, condition order, and the sideEffects entry that keeps registrations alive.
Contract & Visual Testing
What each test layer can prove, why a DOM emulation cannot answer most of it, and deterministic screenshots.
Server-Side Rendering & Hydration
Emitting declarative shadow roots, adopting rather than rebuilding, and deferring hydration with islands.
Polyfills & Progressive Enhancement
Detecting capabilities instead of browsers, and designing the pre-upgrade state every reader sees first.