Encapsulation and Theming: The New Frontiers of the Final CSS Challenge
summary
Explains how Shadow DOM encapsulation protects component styles but prevents global theming, and recommends practical approaches: use CSS custom properties with providers (example: styled-components) or limited selectors like :host and ::slotted to create hooks. Describes the new ::part with part forwarding proposal to allow outer CSS to style internals, notes browser support (Chrome OK, Firefox behind a flag, Safari improving) and warns that the old apply() proposal has been removed so tradeoffs remain.
AI-written summary · about
chapters (23)
- 0:00Modern CSS themes
- 3:15Global cascade problems
- 5:48Isolated style components
- 6:31BEM for styling
- 7:58BEM limits with complex components
- 10:54BEM drawbacks and alternatives
- 11:35CSS encapsulation history
- 14:35Shadow DOM encapsulation
- 16:00Framework encapsulation
- 18:10CSS-in-JS theming in React
- 20:01Web Components support
- 21:29Component reuse and consistency
- 22:12Shadow piercing risks
- 23:41CSS host functions and ::part
- 26:12Custom elements and styling
- 27:46External CSS to components
- 29:13Direct CSS risks
- 31:02CSS variables alternative
- 33:33@apply function problems
- 36:31Native element styling
- 37:35::part and ::theme intro
- 41:09::part and ::theme limits
- 42:15CSS theming proposals
related talks
29mBreak out from the framework: Web Components to the rescue
47mCSS Rises from the Ashes: (Re)Make Friends with Your Stylesheet
56mModern CSS For Dynamic Component-Based Architecture
39m4½ Methods for Theming in (S)CSS
38mThe Future of Reusable CSS
09mWriting Modular CSS with CSS modules
40mThe ABC's of Architecting Better CSS
46mWhat ever happened with Web Components?