Cascade & Inheritance Level 6 defines scoped styles – allowing authors to provide bounded ranges for selector-matching, and give priority to more ‘proximate’ scope origins.
There are many overlapping and sometimes contradictory features that can live under the concept of “scope” in CSS – but they divide roughly into two approaches:
- Total isolation of a component DOM subtree/fragment from the host page, so that no selectors get in or out unless explicitly requested.
- Lighter-touch, style-driven namespacing, and prioritization of “proximity” when resolving the cascade.
That has lead to a wide range of proposals over the years, including an old scope specification that was never implemented. Focus moved to Shadow-DOM, which is mainly concerned with approach #1 – full isolation. Meanwhile authors have attempted to handle approach #2 through convoluted naming conventions (like BEM) and JS tooling (such as CSS Modules, Styled Components, & Vue Scoped Styles).
In Cascade Level 6 we are developing a new native CSS approach to scope.
Timeline & Documents
- Working Draft (Dec 21, 2021)
- Editor’s Draft (Jul 26, 2021)
- Proposal & Explainer (Dec 15, 2020)
- Public Notes (Nov 10, 2020)
Browser Support
A prototype of @scope
is available in Chrome Canary
with the Experimental Web Platform Features flag enabled.
8 ‘css scope’ episodes
2021
What’s Happening in CSS & Sass @ Front End Nerdery
A podcast focusing on front end development but also covering a wide range of web development and design topics. We talked about CSS, Sass, and work being done in the W3C CSS Working Group.
CSS Cascade 6 (Scope) @ Editor’s Draft
CSS Container Queries, Layers, Scoping and More @ Syntax.fm
In this episode of Syntax, Scott and Wes talk with Miriam about all things CSS – container queries, layers, scoping, and more!
CSSWG, Container Queries, Scope, and Layers @ Word Wrap Show
I talk with Claire and Steph about my journey into webdev and onto the CSSWG, what I find frustrating about how others use CSS, and the three specs I’m working on.
Container Queries & the CSSWG @ The F-Word
I chat with Bruce Lawson & Vadim Makeev about Sass & Susy, CSS Layers & compatibility, Container Queries, and the CSS Working Group.