Contact emails andr...@chromium.org
Explainer https://css.oddbird.net/scope/explainer Specification https://drafts.csswg.org/css-cascade-6/#scope-atrule Summary Allows authors to scope style rules to a given element. The key differences between this and regular descendant combinators are: - The scope proximity <https://drafts.csswg.org/css-cascade-6/#cascade-proximity> cascade criterion, which makes it possible to weigh the priority of declarations according to the distance to a given scoping element. - The scoping limit <https://drafts.csswg.org/css-cascade-6/#scoping-limit>, which makes it possible for a rule to apply to elements within a given subtree, but only until some specified “lower bound”. Example: <style> @scope (.foo) to (.limit) { .green { background-color: green; } } </style> <div class=foo> <div class=green>Green</div> <div class=limit> <div class=green>Not green (within .foo, but below .limit)</div> </div> </div> <div class=green>Not green (not within .foo)</div> Authors can also automatically scope the styles to <style>’s parent element by dropping the selector(s) in @scope’s prelude: <div> <style> @scope { .green { background-color: green; } } </style> <div class=green>Green</div> </div> <div class=green>Not green</div> Blink component Blink>CSS <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS> TAG review https://github.com/w3ctag/design-reviews/issues/593 TAG review status Issues addressed Risks Interoperability and Compatibility Gecko: Under consideration ( https://github.com/mozilla/standards-positions/issues/472) WebKit: Positive (https://github.com/WebKit/standards-positions/issues/13) Web developers: Positive ( https://2022.stateofcss.com/en-US/usage/#missing_features_freeform) See also emoji excitement on this post to bring back scoped styles: https://github.com/w3c/csswg-drafts/issues/3547 Other signals: WebView application risks Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications? No. Debuggability The @scope rule is supported by DevTools. Style rules within @scope appear as they should, and the prelude of the enclosing @scope rule is shown similar to how rules within @media appear. Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)? Yes Is this feature fully tested by web-platform-tests <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md> ? Most of the feature is covered. (wpt.fyi tests <https://wpt.fyi/results/css/css-cascade?label=master&label=experimental&aligned&q=scope> ) - The failing test scope-shadow.html will be addressed before release. - The remaining WPT gaps will be closed before release. crbug.com/1450473 <https://bugs.chromium.org/p/chromium/issues/detail?id=1450473> Flag name CSSScope Requires code in //chrome? False Tracking bug https://crbug.com/1280240 Estimated milestones M117 Anticipated spec changes There are no anticipated spec changes that would break compatibility. We may extend this feature with additional capabilities in the future, notably: - The :scope-end pseudo-class. https://github.com/w3c/csswg-drafts/issues/8617 - Combinators (>>, ~~). https://github.com/w3c/csswg-drafts/issues/8628 - Sibling scopes. https://github.com/w3c/csswg-drafts/issues/7751 The above additions would not change the behavior of what's shipping in this intent, and is just included as a preview of what might come later. Link to entry on the Chrome Platform Status https://chromestatus.com/feature/5100672734199808 Links to previous Intent discussions Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/O2xZZT_xCZM/m/1dPDpV-MCgAJ This intent message was generated by Chrome Platform Status <https://chromestatus.com/>. -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscr...@chromium.org. To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKFBnUo585eMqqfxYsK65h53aT-eUCwAyYak%2BRFW40%3DtUxnMDg%40mail.gmail.com.
