Styling Web Components

A CSS-focused interactive reference for styling web components. Each section demonstrates a specific styling technique with a live demo and code snippet.

Sections

1. The Shadow Boundary — What the shadow boundary blocks and what passes through, with a side-by-side light DOM vs shadow DOM comparison
2. :host — Styling the host element from inside shadow DOM, including attribute-driven variants and pseudo-states
3. :host-context() — Reacting to ancestor classes with interactive toggles
4. CSS Custom Properties — The main theming escape hatch, with live color/size controls that update the component in real time
5. ::part() — Styling named internals from outside the shadow boundary, including what combinators work and which don't
6. exportparts — Forwarding parts through nested shadow boundaries
7. ::slotted() — Styling projected content, with specificity notes and the top-level-only limitation
8. Inherited Properties — Which CSS properties cross the shadow boundary automatically and how to block them with all: initial
9. Adopted / Constructable Stylesheets — Sharing a single CSSStyleSheet across multiple shadow roots with live mutation
10. <link> Inside Shadow DOM — Loading external stylesheets into a shadow root and FOUC considerations
11. :defined and FOUC Prevention — Styling elements before their JS loads with :not(:defined)
12. Container Queries in Shadow DOM — Using @container inside shadow DOM with a resizable demo
13. What Doesn't Work — Common mistakes that fail silently

Includes a dark mode toggle that demonstrates CSS custom property theming across all components.

Tech Stack

• Vanilla JavaScript custom elements (no frameworks or libraries)
• Vite dev server
• Plain CSS

Getting Started

npm install
npm run dev

Open http://localhost:5173 in your browser.

Building

npm run build

Output goes to dist/.