Cascade & Inheritance Level 6 defines scoped styles – allowing authors to provide bounded ranges for selector-matching, and give priority to more ‘proximate’ scope origins.

| spec

CSS Cascade 6 (Scope)

Specification for Scoped Styles

Bookmark from W3C CSS Working Group

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:

  1. Total isolation of a component DOM subtree/fragment from the host page, so that no selectors get in or out unless explicitly requested.
  2. 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

Browser Support

A prototype of @scope is available in Chrome Canary with the Experimental Web Platform Features flag enabled.

Past Events

Everything 'Css scope'

CSS @scope

» elsewhere @ 12 Days of Web