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? 

[2mustange]

Is this being tracked through this bug?

[Honza]

> Is this being tracked through this bug?

Yes

[nopenope2]

Thr CSS scope feature has been enabled on Firefox Nightly for a while now. When will it be released for the general browser version? Could someone from Mozilla comment?

I appreciate the great work done by the Firefox devs and am very much looking forward to the release 😁

[Jon]

@nopenope2 just checked in with the team... we are continuing our work on @scope while we are working across on a number of other Interop 2025 deliverables. The goal (of course dependent on resource availability) is by the end of the year to have @scope, View Transitions, Anchor Positioning, Scroll End Events all available for developers.