Keeping Your CSS Small: scopes, containers, and other new stuff
summary
Builds a dice-roll custom element with a shadow root, template, a button and slot, and shows styles inside the component working and reusing the same underlying stylesheet object via adopted style sheets and CSSStyleSheet.replaceSync. Demonstrates shadow DOM component encapsulation plus CSS shadow parts and exportparts to selectively expose internals which works for targeted styling. Explains scoping proximity as a new tie‑breaker below specificity and outlines a nesting syntax debate (ampersand vs @nest); scope is on the vendors’ timeline this year.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 1:45CSS evolution and challenges
- 4:32Shadow DOM benefits
- 9:53Styling with Shadow DOM
- 12:18CSS variables and Shadow Parts
- 15:08Deep dive: CSS Shadow Parts
- 18:01Shadow DOM encapsulation
- 20:52Shadow DOM with React limits
- 22:39CSS Scoping introduction
- 26:50Why nesting fails
- 28:58Scoping in action
- 31:48CSS Nesting challenges
- 37:01Nesting syntax options
- 38:24Q&A
related talks
47mScope in CSS
47mWhy Doesn't CSS Have Scope?
51mShining Light on the Shadow DOM
32mFuture CSS in Web Components
29mThe evolution of scalable CSS
49mScope in CSS with and without JavaScript
47mCSS Rises from the Ashes: (Re)Make Friends with Your Stylesheet
50mStyling the Future: A Deep Dive into Modern CSS