2075194 - @scope roots that differ only by an attribute value resolve to the same scope between siblings

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Arif Dewi]

Attachment: gecko-scope-repro.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/153.0.0.0 Safari/537.36

Steps to reproduce

Load this page in Firefox:

<!doctype html>
<style>
  @scope ([data-module="a"]) { .row { color: rgb(10, 10, 10); } }
  @scope ([data-module="b"]) { .row { color: rgb(20, 20, 20); } }
</style>
<section data-module="a"><p class="row">first</p></section>
<section data-module="b"><p class="row">second</p></section>

Actual results

Actual results:

Both paragraphs compute color: rgb(10, 10, 10). The second section is styled
by the first section's @scope block; its own block never applies.

Expected results

Expected results:**

The first paragraph is rgb(10, 10, 10) and the second is rgb(20, 20, 20).
Chromium 153 and WebKit 26.6 both do this.

---

Additional information:

Three conditions are needed together; changing any one of them gives the
correct result:

1. The two scoping roots are siblings. Nesting the second section inside
   the first is correct.
2. The two root elements are otherwise indistinguishable: same tag name and
   same class list. Giving them different classes is correct, and so is giving
   them different tag names. Giving them different ids is not — it still
   reproduces.
3. The roots are selected by attribute value. Using .a / .b as the
   scoping roots is correct.

Adding a lower boundary (to ([data-module])) does not change the outcome, and
neither does wrapping the rules in @layer, nor delivering the two blocks in
separate stylesheets via <link>, @import or adoptedStyleSheets.

Reproduced on Firefox 156.0 (release, macOS 26.6.2) and Firefox 155 (Playwright
build, headless). Not reproduced on Chromium 153.0.8010.12 or WebKit 26.6.

This pattern — one stylesheet per component, each scoped to
[data-component="<name>"] — is a natural way to use @scope, and the failure
is silent: the component is simply styled as its neighbour, with nothing
logged.

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Seems like we're incorrectly sharing styles between them. This code is supposed to prevent it afaict.

Maybe we should disable cousin sharing across scope boundaries instead? WDYT David?

Comment 2

[Arif Dewi]

Thanks for the quick response ! :)

Comment 3

[Arif Dewi]

Attachment: gecko-scope-probe2.html

Guys, just in case it might be helpful - attached more test cases. gecko-scope-probe2.html

Comment 4

[David Shin[:dshin]]

Attachment: Bug 2075194: Prevent @scopes with non-trivial attribute selectors from being style shared unconditionally. r=#style

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/c5cb6a8714ec
https://hg.mozilla.org/integration/autoland/rev/2d04042257b6
Prevent @scopes with non-trivial attribute selectors from being style shared unconditionally. r=firefox-style-system-reviewers,emilio

Comment 6

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/63045 for changes under testing/web-platform/tests

Comment 7

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/2d04042257b6

Comment 8

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot