1830512 - (@scope) Add support for @scope

Status: REOPENED

(Core :: CSS Parsing and Computation, enhancement)

Description

[Sebastian Zartner [:sebo]]

The CSS Cascading and Inheritance Module Level 6 introduces an @scope rule that restricts any rules inside it to a subtree or fragment of a document.

This bug is meant to track the implementation of this at-rule.

Sebastian

Comment 1

[Oliver Medhurst [:canadahonk]]

For context, Chrome is planning to ship this in M118 (~October) and it is soon to be enabled by default in Canary. Their intent to ship: https://groups.google.com/a/chromium.org/g/blink-dev/c/OEfGbd74QnQ/m/KaX-2hhRAAAJ

Comment 2

[keithjgrant]

Safari has also shipped this in the latest Tech Preview: https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-185

Comment 3

[Frank Griffith Jr]

In the radar for H1 2024 via https://mozilla-hub.atlassian.net/browse/FFXP-1523

Comment 4

[Daniel Holbert [:dholbert]]

RE interop-2024-starting-style relationship: that's [at least] for this test, which uses @scope and is part of that interop-2024 focus area:
https://wpt.fyi/results/css/css-cascade/scope-starting-style.html
http://wpt.live/css/css-cascade/scope-starting-style.html

Comment 5

[Emilio Cobos Álvarez (:emilio)]

We should probably exclude those from interop then, fwiw.

Comment 6

[Daniel Holbert [:dholbert]]

Makes sense. I filed https://github.com/web-platform-tests/interop/issues/641 to remove that test.

(I think it's just the one test that uses @scope.)

Comment 8

[Sebastian Zartner [:sebo]]

For reference, the intent to prototype @scope was posted at https://groups.google.com/a/mozilla.org/g/dev-platform/c/VokGNgqFqt0.

Sebastian

Comment 9

[David Shin[:dshin]]

Fully passing as of Bug 1889109 - closing.

Comment 11

[David Shin[:dshin]]

Doh, wrong bug...

Comment 12

[Antoine BERNIER]

(In reply to David Shin[:dshin] from comment #11)

Doh, wrong bug...

false hope 😅

Comment 13

[g]

What is the path to getting this enabled by default?

I'm seeing the following related bugs:

Listed as depending on:
Bug 1914188 - @scope support for invalidation -- this seems like an important edge-case to handle (and seems to be somewhat-actively being worked on)
Bug 1930618 is a broader issue related to how styles interact with print selections. It is triggered by @scope, but also by other style constructs, and the fix (semi-actively being discussed, if not worked on) seems fairly unrelated to the @scope implementation
Bug 1882379 - Warnings for useless @scope selectors -- seems nice to have, but hardly critical

This issue is also listed as "blocking" DevTools support (bug 1873029). No longer really the case -- devtools support is underway with the feature-flagged implementation.

Are these all considered blockers for release?

I don't know Mozilla's standard practices here, but it seems to me like at least Bug 1882379 and probably Bug 1930618 shouldn't need to block the feature-flag from being enabled by default.

Bug 1873029 distinguishes between basic devtools support ("displaying fine in the rules view", which has been implemented in bug 1893593), vs more extended/optional debugging features (which are still underway). So it also seems this probably doesn't need to be a blocker anymore?

Thanks (from all of us eagerly awaiting this feature's arrival!)

Comment 14

[pete_bugzilla_mozilla_org]

IMO this is one of the most exciting additions to CSS in years. Toolkits that use shadow DOM have had scoped styles for a while, but @scope opens it up to the vast majority of toolkits which don't. The benefits to React users especially will be enormous.

Yes there are hacks where the CSS is modified at build time, and this allows for scoped styles of a sort, but it's hard to do this in a way that handles all corner cases correctly. For example, React's styled-components stop a component's styles affecting its parent, but they don't stop the opposite, where a parent's styles affect its children.

Just wanted to follow up to @g and explain why we're all so eagerly awaiting!

Comment 15

[David Shin[:dshin]]

Thanks for the interest - Yep, this is on our radar for 2025, especially given that it's likely to be part of InterOp.

As for blockers - Perhaps not all of them are blockers, yes, but Bug 1914188 i.e. Invalidation handling is necessary for the feature to properly function on websites that trigger restyle on elements after their first styling.

Comment 16

[VitDyn]

The support has been enabled under the layout.css.at-scope.enabled config flag for a while already. Any plans to consider it stable in the foreseeable future?

Comment 17

[Sebastian Zartner [:sebo]]

@scope is part of the Interop 2025 project. So it is meant to ship this year. And looking at the related Web Platform Tests, the main things that are missing to ship it is related to invalidation, which is covered in bug 1914188.

Sebastian