Add Scoped Styles aka. CSS Scoping aka. @scope

[Schweinepriester]

• https://css-tricks.com/css-is-going-gosh-darned-hog-wild-i-tell-ya-what/#scoping
• https://drafts.csswg.org/css-cascade-6/#scoped-styles
• https://css-tricks.com/early-days-for-css-scoping/
• https://css.oddbird.net/scope/syntax/

(Not the same as https://caniuse.com/style-scoped)

[mirisuzanne]

I expect browsers to start prototyping this soon, but I don't think it's landed in any preview releases yet (if that's the criteria).

[keithjgrant]

Chrome has a demo of this behind a flag now and it seems like it might be making forward progress again

[matthew-dean]

Tracking bug is here: https://chromium-review.googlesource.com/c/chromium/src/+/4161741

[Eduruiz]

I'm using google-chrome-dev on linux and it's already there :)

[Schweinepriester]

• https://fullystacked.net/posts/scope-in-css/
• Shipping in Chrome 117: https://chromestatus.com/feature/5100672734199808
• Positive position for WebKit: CSS Cascading and Inheritance Level 6 (@scope) WebKit/standards-positions#13
• Firefox:
  • CSS @scope mozilla/standards-positions#472
  • https://bugzilla.mozilla.org/show_bug.cgi?id=1830512

[Fyrd]

Now available at https://caniuse.com/css-cascade-scope

[yisibl]

It is expected to ship in Chrome 118. https://chromium-review.googlesource.com/c/chromium/src/+/4790561

[bramus]

It is expected to ship in Chrome 118. https://chromium-review.googlesource.com/c/chromium/src/+/4790561

That is correct, as per https://chromestatus.com/feature/5100672734199808