Scoped Styles Inside Shadow DOM
Write CSS that only affects elements within the shadow tree.
Scoped Styles Inside Shadow DOM is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
CSS Encapsulation by Default
Every <style> rule inside a shadow root applies only inside that root. p { color: red } in a shadow tree colors only paragraphs inside that shadow — paragraphs in the main document are unaffected, and main-document styles do not reach into the shadow.
Why Encapsulation Matters
Encapsulation eliminates the global-CSS problem that has haunted large applications for decades. A component's styles cannot be accidentally overridden by site CSS, and the component cannot break the site by accident. The boundary is the spec, not a convention.
The :host Pseudo-class
From inside the shadow, style the host element with :host. Use :host(selector) to scope by selector: :host([open]) { display: block; } matches the host only when the open attribute is present.
Inherited Properties Still Cross
Inherited CSS properties (color, font-family, line-height) still cross the shadow boundary by inheritance. A document setting body { color: blue } turns shadow text blue too unless the shadow explicitly overrides it. This is a feature: typography defaults stay consistent.
CSS Custom Properties Pierce the Boundary
Custom properties (CSS variables) inherit through shadow roots, making them the canonical way to expose a component's theming API: declare --card-bg: var(--surface, white) inside the shadow and let consumers override --surface on the host.
/* Shadow */
:host {
background: var(--card-bg, white);
}
/* Page */
my-card {
--card-bg: #f3f4f6;
}::part for External Styling
Mark a shadow-internal element with part="name" and consumers can style it with my-card::part(name) { ... }. Use parts for individual styling hooks while keeping the bulk of the shadow tree encapsulated.
Adopted Stylesheets
shadowRoot.adoptedStyleSheets = [sheet] shares one CSSStyleSheet across many shadow roots, avoiding repeated <style> parsing. Construct sheets with new CSSStyleSheet() and sheet.replaceSync(cssText). Big performance win in design systems.
Order of Declarations
Place <style> tags at the very top of the shadow innerHTML so styles are parsed before the rest of the DOM is constructed. This avoids the brief flash of unstyled content that occurs if styles arrive late in the parse order.
:host-context for Ancestor-Based Rules
:host-context(.dark-mode) :host styles the host based on an ancestor selector outside the shadow. Useful for theming components based on a class on a high-level wrapper. Browser support is good but verify in your target matrix.
Global Reset Stays Outside
Document-wide CSS resets (margins on body, box-sizing) do not affect shadow trees. Re-apply needed resets inside each shadow root, or share via a constructed stylesheet adopted into every component.
Debugging Shadow Styles
Chrome DevTools shows shadow roots in the Elements panel under "#shadow-root (open)". You can inspect, edit, and toggle shadow styles like any other CSS, including the :host pseudo-class and ::part rules.
Knowledge Check
Why are CSS custom properties (variables) the preferred way to theme a shadow DOM component?
Summary
Shadow DOM encapsulates styles in both directions. Style the host with :host, expose theming hooks via inherited CSS custom properties, expose individual elements for styling with ::part, share stylesheets with adoptedStyleSheets, and reapply resets inside each shadow root since document-wide CSS does not cross the boundary.
Frequently asked questions
Is the “Scoped Styles Inside Shadow DOM” lesson free?
Yes — the full text of “Scoped Styles Inside Shadow DOM” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “Scoped Styles Inside Shadow DOM”?
Write CSS that only affects elements within the shadow tree. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Scoped Styles Inside Shadow DOM” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- attachShadow and Shadow Root
- Slot Elements for Content Distribution
- Scoped Styles Inside Shadow DOM
- Part and Exportparts for External Styling