Implement CSS @scope rule

[fabriziobagala]

Can you please implement the CSS @scope rule? It allows CSS rules to be applied to a part of the document, with upper and lower bounds described by selectors.

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

[sabinadhikari]

@scope rule in CSS

Hi, I have been a long time Firefox user. Chrome has recently released  @scope CSS rule support in their browser version 118.
It is an awesome feature to have in Firefox arsenal as well. CSS isolation is imperative mostly when you are working with web components. Hoping Firefox will pick this up soon.

Here's the video released by Google çhrome.
https://www.youtube.com/watch?v=zx8OZtKe6hA&t=215s

[Jon]

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.

[Jon]

(Note: similar ideas have been merged into this thread)

[Honza]

Hi @sabinadhikari, 

you can follow Mozilla's position on this feature here:

https://github.com/mozilla/standards-positions/issues/472

The latest news (and the thread should be updated soon) is that we think that it's worth prototyping)

Honza

[Honza]

Quick update on @scope support.

Mozilla's position on @scope changed to "positive"  and support for it is now part of the Interop 2024 initiative

A few links:

• Interop 2024 Announcement
• @starting-style and transition-behavior focus area (@scope is part of that)
• Here is the bug for @scope blocking the @starting-style and transition-behavior meta 

[Jon]

Hey all,

Good news...

This is being worked on — feel free to track the work here and stay tuned for more updates 😃

[jakenorth]

very cool. thank you!

[bastiW]

Is there a polyfill to be used in the meantime?