Scope in CSS
summary
Explains why scoping matters and compares approaches: traditional classes, CSS Modules, Tailwind utilities, iframes and Shadow DOM for hard isolation, and the new @scope at-rule with its donut scope stop and proximity tie‑breaker. Demonstrates the surprising test of 10,000 cards with per‑component style tags that shows little rendering or memory penalty, and highlights the DOM‑injected DOM‑blasted inline style blocks as a low‑tooling way to get component scoping that appears to work in practice.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 1:52What is scope in CSS
- 3:57CSS is naturally scoped
- 6:04Global CSS problems
- 8:11Advanced scoping tools
- 12:48CSS modules and colocation
- 16:40Web platform scoping limits
- 17:01Hardcore scoping with iframes
- 19:09ShadowDOM in practice
- 22:20New @scope rule
- 24:26Donut scoping in @scope
- 27:16Proximity in @scope
- 31:48DOM blasters with @scope
- 36:20Recap and future
- 38:08Q&A
