@scope support

[mindplay-dk]

What would you want to propose?

I'd like to suggest support for @scope

• https://drafts.csswg.org/css-cascade-6/#scoped-styles
• https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
• https://developer.chrome.com/docs/css-ui/at-scope

Suggested solution

This is just an idea, I have no idea if this would work in general.

https://jsfiddle.net/mindplay/agd9k2p1/

So this:

@scope (.panel) to (.content) {
  h2 {
    color: red;
  }
}

Becomes this:

:where(.panel) h2:where(:not(.content h2)) {
  color: red;
}

And a more complex selector like this:

@scope ([scope=panel]) to ([scope]:not([scope=panel])) {
  h2 {
    color: red;
  }
  p {
    font-weight: bold;
  }
}

Becomes this:

:where([scope=panel]) h2:where(:not([scope]:not([scope=panel]) h2)) {
  color: red;
}

:where([scope=panel]) p:where(:not([scope]:not([scope=panel]) p)) {
  font-weight: bold;
}

So this would require both :where and :not, I think - to get the right specificity.

But this is just a rough idea - I'm not a CSS superhero, and I don't know if this is completely correct or scoped properly etc.

Additional context

Only a few browsers support this already.

https://caniuse.com/css-cascade-scope

But this would be an incredible feature, if we didn't have to wait 3-5 years for every browser to support it - we could basically stop using CSS frameworks, CSS-in-JS, Tailwind etc. would all essentially be obsolete (from my personal point of view!) and we could finally have something resembling component-scoped CSS natively in the browser without JavaScript. 😄

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[romainmenke]

But this would be an incredible feature, if we didn't have to wait 3-5 years for every browser to support it - we could basically stop using CSS frameworks, CSS-in-JS, Tailwind etc. would all essentially be obsolete (from my personal point of view!) and we could finally have something resembling component-scoped CSS natively in the browser without JavaScript.

Yes! We don't use any of those things but we are equally excited about @scope and all the things it can do.

I've been following the specification work and as far as I know there is no way to have a full polyfill that is actually correct. But the same was said about cascade layers and we managed to ship that so, who knows :D

---

Cascade layers took several weeks of near full time work to get right and this will have a similar level of complexity. A lot of that time is research, testing, ...

I don't really want to create this for free :)

I've set a sponsorship goal, if this is met I am willing to start work on this :
https://github.com/sponsors/csstools/

[MrHBS]

I really hope that goal is met!