Shining Light on the Shadow DOM
summary
Explains how styling actually crosses the shadow boundary: concrete rules for cascade and inheritance, slots target light DOM relationships and cannot style grandchildren, demonstrates autonomous custom elements in vanilla JS with live Lit/CodePen demos, shows a production Red Hat navigation built with light DOM, shadow DOM and fallback markup that works in the wild, catalogs browser inconsistencies (host-context sparsely supported) and compatibility tactics, highlights theming via 36 custom properties that pierce the shadow root, compares approaches including constructible stylesheets and warns that parts = flood (any CSS property, full author control).
AI-written summary · about
chapters (26)
- 0:00Introduction
- 1:58Cassandra Roberts
- 8:16Custom Element Registry
- 9:26Custom Builtins
- 10:45Autonomous Custom Elements
- 13:02Encapsulation
- 15:26CSS Best Practices
- 16:51Building a Web Component
- 22:30Live Coding
- 32:01Moral of the Story
- 32:57Custom Properties
- 33:47Generic Properties
- 34:40Be Thoughtful
- 35:26Spectrum Design Systems
- 36:01Web Component Encapsulation
- 36:51What is Light on DOM
- 38:13Slot tag
- 40:05Sloted styling
- 41:27Bonkers example
- 41:51Part specification
- 43:01Part example
- 43:43Part in use
- 43:59Global attribute names
- 44:55Utility languages
- 48:05Frameworks
- 48:58Conclusion
related talks
50mKeeping Your CSS Small: scopes, containers, and other new stuff
13mGhost in the Shadow DOM
06mUnlocking the Power of Shadow DOM
29mInspector Web and the Mystery of the Shadow DOM
42mWorking in the Shadow (DOM) - How to test Web Components
36mThe State of Web Components
47mCSS Rises from the Ashes: (Re)Make Friends with Your Stylesheet
38mCSS Reborn: (Re)make Friends with Your Stylesheet