Summary

  • The W3C’s first public Cascade Level 6 draft in December 2021 proposed @scope for bounded styles and a way to favor a nearer scoping root, while also adding the root selector’s specificity to rules inside it.
  • The 2023 and 2024 drafts separated those concerns: a scope boundary limits where rules match, the root selector no longer inflates their specificity, and proximity helps decide competing scoped declarations at its place in the cascade.

Imagine an article card nested inside a larger page card. Each has a button. The parent’s design wants blue buttons; the small card’s editor wants coral. A stylesheet that describes every button by walking down a long chain of ancestors can work, but the chain grows with the page. Move the small card elsewhere and the selector becomes a forwarding address written on a building that has already moved. Generated component systems found another expedient: stamp a unique attribute on every element and append it to every selector.

That keeps paint in its intended room, but it makes the document look as if everyone had to wear a name badge to visit the kitchen.

The W3C’s 21 December 2021 first public Cascade Level 6 draft showed precisely that attribute-heavy arrangement and proposed @scope as an alternative. A rule could name a scoping root and an optional lower boundary, then write ordinary selectors inside the block. A component’s root would carry the identifying mark; its descendants would not each need a stamp. The draft also floated proximity: when competing scoped rules address an element, the closer root could matter. The browser would count the steps through the element tree rather than ask every author to encode distance in a selector.

That first model still gave the scope root’s selector extra specificity to the rules within it. The draft’s example treated @scope (#hero) { img { ... } } like a selector with the ID weight of #hero plus the type weight of img. A fence around the garden was also a medal pinned to every plant. The document itself showed that the working group was still deciding how strongly proximity should count. This is why old drafts make useful history: a familiar feature name can conceal a different calculation under the same roof.

By the 21 March 2023 draft, that calculation had changed. The scope prelude no longer donated its specificity to the internal selector. The draft compared @scope (#hero) { img { ... } } with :where(#hero) img { ... } and gave each (0,0,1). The img is the point on the specificity scoreboard; #hero establishes where the scope begins. This is a cleaner division of labor. A boundary says where a rule may act. It does not automatically make that rule outrank a neighboring author’s choice.

The same draft described an optional end, written to (...), so a broad scope could stop before a nested region. In our page of cards, the outer card’s rule can serve its own contents and yield as it reaches the inner card’s boundary. The inner card can then choose coral for its button without placing protective tags on every descendant. Scope also has a proximity rule for conflicts: a declaration associated with a nearer scoping root can win at the relevant stage of the cascade. Distance is measured through the tree, not inferred from the visual size of the card or the length of its class name.

The 6 September 2024 draft tightened the property lines. Elements that match the lower limit are excluded from the resulting scope; proximity is a single measurement between a scoping root and the subject of the styled rule. The change log records the removal of the strong-proximity option and, looking back to the first draft, the removal of the scope prelude from specificity. It also spells out a boundary on the boundary: name-defining rules such as @keyframes, @font-face and @layer inside @scope remain global, while style rules nested within can be scoped. This is a fence for matching, not a sealed city-state with a private registry of every CSS name.

The W3C publication history dates the public steps in 2021, 2023 and 2024; the CSS Working Group’s 2024 note identifies @scope as the new work of Cascade Level 6. The progress is more interesting than a simple “CSS got boundaries” headline. The drafts asked how much authority a boundary should carry, then trimmed away an automatic specificity bonus and clarified what proximity actually measures. The small card can repaint its own button. The outer card can keep its blue ones. Nobody needs to sew another badge onto every child element.