LGTM1 This seems like an obvious useful addition with relatively broad consensus around it. Thanks for working on this!
On Thu, Jun 1, 2023 at 10:39 AM Anders Hartvoll Ruud <[email protected]> wrote: > Contact emails > > [email protected] > > Explainer > > https://css.oddbird.net/scope/explainer > +Miriam Suzanne <[email protected]> - that's a great explainer!! (and by far the most stylish one I've ever seen) > > 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 [email protected]. > 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 > <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKFBnUo585eMqqfxYsK65h53aT-eUCwAyYak%2BRFW40%3DtUxnMDg%40mail.gmail.com?utm_medium=email&utm_source=footer> > . > -- 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 [email protected]. To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfU6hE1yX2p3B2mgvED8bXjY%2BAGWF8ar%3Dq5eNVoZVuhAOw%40mail.gmail.com.
