@scope

[andruud]

Description

Allows authors to scope style rules to a given scoping root, and style elements according to the proximity of that scoping root.

Specification

https://drafts.csswg.org/css-cascade-6/#scoped-styles

Additional Signals

Standards Position

Firefox: Positive - mozilla/standards-positions#472
Safari: Positive - WebKit/standards-positions#13

Browser Bugs

Chromium (17 stars)
Mozilla

Tests

https://wpt.fyi/results/css/css-cascade?label=experimental&label=master&aligned&view=subtest&q=scope

Developer Surveys

It made the list of missing features in the State of CSS survey in 2019, 2020, and 2021. Featured in “missing features” list from state of CSS 2023

Workarounds

Scope being missing from CSS is one reason why developers lean on css-in-js libraries. These libraries can have poor performance characteristics when they parse styles as JS first, and then again as CSS.

• Salesforce has written a custom tool that automatically prefixes all styles in a file with an additional unique class name.
• Requested by Rich Harris, creator of Svelte, a framework with a lot of mindshare.
• “Scope separate from templating” was also a request from Stencil/Ionic, a web components library.
• BEM and OOCCS were designed to avoid the name collisions that come from overlapping styles, but both rely on developer vigilance to work.

Additional Signals

Use counter data - https://chromestatus.com/metrics/feature/timeline/popularity/4212

[andruud]

Oh, looks like @miragecraft already opened an issue for this. Closing as duplicate of #838.

[andruud]

(Duplicate)