Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-scoping][css-cascade] :scope in shadowy prelude-less @scope matches nothing #9178

Closed
andruud opened this issue Aug 11, 2023 · 10 comments
Closed

Comments

@andruud
Copy link
Member

andruud commented Aug 11, 2023

A prelude-less @scope rule, e.g. @scope { ... } scopes the styles to the root of the containing tree if the owner element has no parent element. Example:

<div class=host>
  <template shadowrootmode=open>
    <style>
      @scope {
        /* :scope is the _shadow root_ */
      }
    </style>
  </template>
</div>

However, the shadow root can't be matched by :scope, because it's replaced by the shadow host for selector purposes. CSS Scoping 1:

For the purpose of Selectors, a shadow host also appears in its shadow tree, with the contents of the shadow tree treated as its children. (In other words, the shadow host is treated as replacing the shadow root node.)

This makes prelude-less @scope rules that exist directly beneath a shadow root mostly non-usable, since the inner selectors either have :scope in them somewhere, or get an implicit :scope prepended if not.

Not sure what the best fix is here ...

@tabatkins


I noticed that https://drafts.csswg.org/css-scoping-1/#shadow-gloss contradicts the other part of the spec:

The elements in a shadow tree are not descendants of the shadow host in general (including for the purposes of Selectors like the descendant combinator). However, the shadow tree, when it exists, is used in the construction of the flattened element tree, which CSS uses for all purposes after Selectors (including inheritance and box construction).

But since this doesn't match browser implementations, I assume it's a remnant of a previous spec version.


EDIT: Related: #7261 (comment)

@andruud
Copy link
Member Author

andruud commented Aug 11, 2023

Looking a bit closer at the specs, the most consistent thing might be to scope to the shadow host instead, though still match in the context of the shadow tree. So the scoping root is:

  1. The parent element of the owner node, if such an element exists
  2. Otherwise the shadow host, if the containing node tree is a shadow tree
  3. Otherwise the root of the containing node tree.

EDIT: And we'd need to pair that with #9025, otherwise :scope wouldn't match in this case either.

@mirisuzanne
Copy link
Contributor

Yes, this solution makes sense to me. I would expect this scope to be the shadow host.

@tabatkins
Copy link
Member

Yes, this seems pretty clearly to just be an oversight; if the stylesheet is a root element of the shadow tree, it should scope to the shadow host. (And :scope should be able to match the host element in this instance, like & can (search for "featureless").) This effectively makes the @scope a no-op, I think, since shadow styles are always scoped to the shadow anyway? But it should def work, rather than breaking.

I noticed that drafts.csswg.org/css-scoping-1/#shadow-gloss contradicts the other part of the spec:
[snip]
But since this doesn't match browser implementations, I assume it's a remnant of a previous spec version.

Hm, yeah, that might predate some of the featureless text, or maybe it's just being too general, and meant like "you can't do my-component > .in-the-shadow". I'll tweak the wording.

@andruud
Copy link
Member Author

andruud commented Aug 17, 2023

@astearns Proposed async resolution: @scope without <scope-start> scopes to the shadow host instead of the shadow root.

@andruud andruud added the Async Resolution: Proposed Candidate for auto-resolve with stated time limit label Aug 17, 2023
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Aug 17, 2023
Implicit scopes, i.e. scopes without a <scope-start> selector,
should scope to the parent element of the owner element:

  <div id=foo>
    <style>
      @scope { ... } /* Scoped to #foo */
    </style>
  </div>

However, there are two ShadowDOM-related cases where we don't have
an owner-parent element:

 1. When the <style> element appears directly below a shadow root.
 2. When the stylesheet is constructed/adopted. In this case we don't
    even have an owner element.

Currently, we handle this by never activating the scope.
This CL fixes this issue by instead scoping implicit @scope rules
to the shadow *host* instead of the *root*. This requires a spec
change [1], therefore the tests are marked as tentative.

Fixed: 1379844

[1] w3c/csswg-drafts#9178

Change-Id: I9146ffb3c6cb5e2f5697dc3d3e62cda9396709b6
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Aug 17, 2023
Implicit scopes, i.e. scopes without a <scope-start> selector,
should scope to the parent element of the owner element:

  <div id=foo>
    <style>
      @scope { ... } /* Scoped to #foo */
    </style>
  </div>

However, there are two ShadowDOM-related cases where we don't have
an owner-parent element:

 1. When the <style> element appears directly below a shadow root.
 2. When the stylesheet is constructed/adopted. In this case we don't
    even have an owner element.

Currently, we handle this by never activating the scope.
This CL fixes this issue by instead scoping implicit @scope rules
to the shadow *host* instead of the *root*. This requires a spec
change [1], therefore the tests are marked as tentative.

Fixed: 1379844

[1] w3c/csswg-drafts#9178

Change-Id: I9146ffb3c6cb5e2f5697dc3d3e62cda9396709b6
aarongable pushed a commit to chromium/chromium that referenced this issue Aug 17, 2023
Implicit scopes, i.e. scopes without a <scope-start> selector,
should scope to the parent element of the owner element:

  <div id=foo>
    <style>
      @scope { ... } /* Scoped to #foo */
    </style>
  </div>

However, there are two ShadowDOM-related cases where we don't have
an owner-parent element:

 1. When the <style> element appears directly below a shadow root.
 2. When the stylesheet is constructed/adopted. In this case we don't
    even have an owner element.

Currently, we handle this by never activating the scope.
This CL fixes this issue by instead scoping implicit @scope rules
to the shadow *host* instead of the *root*. This requires a spec
change [1], therefore the tests are marked as tentative.

Fixed: 1379844

[1] w3c/csswg-drafts#9178

Change-Id: I9146ffb3c6cb5e2f5697dc3d3e62cda9396709b6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /4778499
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Anders Hartvoll Ruud <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1184653}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Aug 17, 2023
Implicit scopes, i.e. scopes without a <scope-start> selector,
should scope to the parent element of the owner element:

  <div id=foo>
    <style>
      @scope { ... } /* Scoped to #foo */
    </style>
  </div>

However, there are two ShadowDOM-related cases where we don't have
an owner-parent element:

 1. When the <style> element appears directly below a shadow root.
 2. When the stylesheet is constructed/adopted. In this case we don't
    even have an owner element.

Currently, we handle this by never activating the scope.
This CL fixes this issue by instead scoping implicit @scope rules
to the shadow *host* instead of the *root*. This requires a spec
change [1], therefore the tests are marked as tentative.

Fixed: 1379844

[1] w3c/csswg-drafts#9178

Change-Id: I9146ffb3c6cb5e2f5697dc3d3e62cda9396709b6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /4778499
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Anders Hartvoll Ruud <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1184653}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Aug 17, 2023
Implicit scopes, i.e. scopes without a <scope-start> selector,
should scope to the parent element of the owner element:

  <div id=foo>
    <style>
      @scope { ... } /* Scoped to #foo */
    </style>
  </div>

However, there are two ShadowDOM-related cases where we don't have
an owner-parent element:

 1. When the <style> element appears directly below a shadow root.
 2. When the stylesheet is constructed/adopted. In this case we don't
    even have an owner element.

Currently, we handle this by never activating the scope.
This CL fixes this issue by instead scoping implicit @scope rules
to the shadow *host* instead of the *root*. This requires a spec
change [1], therefore the tests are marked as tentative.

Fixed: 1379844

[1] w3c/csswg-drafts#9178

Change-Id: I9146ffb3c6cb5e2f5697dc3d3e62cda9396709b6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /4778499
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Anders Hartvoll Ruud <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1184653}
@mirisuzanne
Copy link
Contributor

mirisuzanne commented Aug 17, 2023

I don't think this would necessarily make it no-op, since @scope has a cascade-priority aspect. It would still impact how styles scoped to the host element interact with differently-scoped (or unscoped) styles in the same shadow dom.

Then again, the host is likely the default scope-root for un-scoped styles in shadow dom? So maybe that is still no-op?

@andruud
Copy link
Member Author

andruud commented Aug 17, 2023

Yeah, scoping-wise it's a no-op, but you'd get proximity applied between the subject and the host.

whimboo pushed a commit to web-platform-tests/wpt that referenced this issue Aug 22, 2023
Implicit scopes, i.e. scopes without a <scope-start> selector,
should scope to the parent element of the owner element:

  <div id=foo>
    <style>
      @scope { ... } /* Scoped to #foo */
    </style>
  </div>

However, there are two ShadowDOM-related cases where we don't have
an owner-parent element:

 1. When the <style> element appears directly below a shadow root.
 2. When the stylesheet is constructed/adopted. In this case we don't
    even have an owner element.

Currently, we handle this by never activating the scope.
This CL fixes this issue by instead scoping implicit @scope rules
to the shadow *host* instead of the *root*. This requires a spec
change [1], therefore the tests are marked as tentative.

Fixed: 1379844

[1] w3c/csswg-drafts#9178

Change-Id: I9146ffb3c6cb5e2f5697dc3d3e62cda9396709b6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /4778499
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Anders Hartvoll Ruud <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1184653}
@astearns
Copy link
Member

astearns commented Aug 22, 2023

The CSSWG will automatically accept this resolution one week from now if no objections are raised here. Anyone can add an emoji to this comment to express support. If you do not support this resolution, please add a new comment.

Proposed Resolution: @scope without <scope-start> scopes to the shadow host instead of the shadow root.

@astearns astearns added Async Resolution: Call For Consensus Resolution will be called after time limit expires and removed Async Resolution: Proposed Candidate for auto-resolve with stated time limit labels Aug 22, 2023
@astearns
Copy link
Member

astearns commented Sep 3, 2023

RESOLVED: @scope without <scope-start> scopes to the shadow host instead of the shadow root.

@astearns astearns removed the Async Resolution: Call For Consensus Resolution will be called after time limit expires label Sep 3, 2023
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Sep 13, 2023
…s no owner-parent element, a=testonly

Automatic update from web-platform-tests
[@scope] Scope to host element if there's no owner-parent element

Implicit scopes, i.e. scopes without a <scope-start> selector,
should scope to the parent element of the owner element:

  <div id=foo>
    <style>
      @scope { ... } /* Scoped to #foo */
    </style>
  </div>

However, there are two ShadowDOM-related cases where we don't have
an owner-parent element:

 1. When the <style> element appears directly below a shadow root.
 2. When the stylesheet is constructed/adopted. In this case we don't
    even have an owner element.

Currently, we handle this by never activating the scope.
This CL fixes this issue by instead scoping implicit @scope rules
to the shadow *host* instead of the *root*. This requires a spec
change [1], therefore the tests are marked as tentative.

Fixed: 1379844

[1] w3c/csswg-drafts#9178

Change-Id: I9146ffb3c6cb5e2f5697dc3d3e62cda9396709b6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /4778499
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Anders Hartvoll Ruud <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1184653}

--

wpt-commits: 21cc51826719698a688a92e7a48c8775a5329c20
wpt-pr: 41440
vinnydiehl pushed a commit to vinnydiehl/mozilla-unified that referenced this issue Sep 14, 2023
…s no owner-parent element, a=testonly

Automatic update from web-platform-tests
[@scope] Scope to host element if there's no owner-parent element

Implicit scopes, i.e. scopes without a <scope-start> selector,
should scope to the parent element of the owner element:

  <div id=foo>
    <style>
      @scope { ... } /* Scoped to #foo */
    </style>
  </div>

However, there are two ShadowDOM-related cases where we don't have
an owner-parent element:

 1. When the <style> element appears directly below a shadow root.
 2. When the stylesheet is constructed/adopted. In this case we don't
    even have an owner element.

Currently, we handle this by never activating the scope.
This CL fixes this issue by instead scoping implicit @scope rules
to the shadow *host* instead of the *root*. This requires a spec
change [1], therefore the tests are marked as tentative.

Fixed: 1379844

[1] w3c/csswg-drafts#9178

Change-Id: I9146ffb3c6cb5e2f5697dc3d3e62cda9396709b6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /4778499
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Anders Hartvoll Ruud <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1184653}

--

wpt-commits: 21cc51826719698a688a92e7a48c8775a5329c20
wpt-pr: 41440
@jacobrask
Copy link

Would this mean that you can author a stylesheet with :scope { }, include that stylesheet in either the root of the document, where it would match :root, or in a shadow root, where it would match :host? E.g. :is(:root, :host)

Lightning00Blade pushed a commit to Lightning00Blade/wpt that referenced this issue Dec 11, 2023
Implicit scopes, i.e. scopes without a <scope-start> selector,
should scope to the parent element of the owner element:

  <div id=foo>
    <style>
      @scope { ... } /* Scoped to #foo */
    </style>
  </div>

However, there are two ShadowDOM-related cases where we don't have
an owner-parent element:

 1. When the <style> element appears directly below a shadow root.
 2. When the stylesheet is constructed/adopted. In this case we don't
    even have an owner element.

Currently, we handle this by never activating the scope.
This CL fixes this issue by instead scoping implicit @scope rules
to the shadow *host* instead of the *root*. This requires a spec
change [1], therefore the tests are marked as tentative.

Fixed: 1379844

[1] w3c/csswg-drafts#9178

Change-Id: I9146ffb3c6cb5e2f5697dc3d3e62cda9396709b6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /4778499
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Anders Hartvoll Ruud <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1184653}
@mirisuzanne mirisuzanne self-assigned this Dec 11, 2023
@mirisuzanne
Copy link
Contributor

Would this mean that you can author a stylesheet with :scope { }, include that stylesheet in either the root of the document, where it would match :root, or in a shadow root, where it would match :host? E.g. :is(:root, :host)

@jacobrask I don't think this change would have any impact on how :scope works outside an @scope rule. This is specific to the scope created by @scope { … } in a shadow context. Used together… I think you would be able to create the effect?

If no @scope is defined, then :scope is treated as :root.

@andruud andruud closed this as completed Sep 16, 2024
aarongable pushed a commit to chromium/chromium that referenced this issue Sep 16, 2024
The relevant issue has been resolved, and the spec has been edited.

w3c/csswg-drafts#9178

Change-Id: I218d98496e31d24e07a6a4e40bf0be4e6940c731
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /5864290
Reviewed-by: Rune Lillesveen <[email protected]>
Auto-Submit: Anders Hartvoll Ruud <[email protected]>
Commit-Queue: Rune Lillesveen <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1355808}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Sep 16, 2024
The relevant issue has been resolved, and the spec has been edited.

w3c/csswg-drafts#9178

Change-Id: I218d98496e31d24e07a6a4e40bf0be4e6940c731
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /5864290
Reviewed-by: Rune Lillesveen <[email protected]>
Auto-Submit: Anders Hartvoll Ruud <[email protected]>
Commit-Queue: Rune Lillesveen <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1355808}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Sep 16, 2024
The relevant issue has been resolved, and the spec has been edited.

w3c/csswg-drafts#9178

Change-Id: I218d98496e31d24e07a6a4e40bf0be4e6940c731
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /5864290
Reviewed-by: Rune Lillesveen <[email protected]>
Auto-Submit: Anders Hartvoll Ruud <[email protected]>
Commit-Queue: Rune Lillesveen <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1355808}
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Sep 24, 2024
…entative, a=testonly

Automatic update from web-platform-tests
[@scope] Mark scope-shadow.html as non-tentative

The relevant issue has been resolved, and the spec has been edited.

w3c/csswg-drafts#9178

Change-Id: I218d98496e31d24e07a6a4e40bf0be4e6940c731
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /5864290
Reviewed-by: Rune Lillesveen <[email protected]>
Auto-Submit: Anders Hartvoll Ruud <[email protected]>
Commit-Queue: Rune Lillesveen <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1355808}

--

wpt-commits: 08f0c2e7e7b808bd8227a2985a11271b905ab5f9
wpt-pr: 48194
jamienicol pushed a commit to jamienicol/gecko that referenced this issue Sep 25, 2024
…entative, a=testonly

Automatic update from web-platform-tests
[@scope] Mark scope-shadow.html as non-tentative

The relevant issue has been resolved, and the spec has been edited.

w3c/csswg-drafts#9178

Change-Id: I218d98496e31d24e07a6a4e40bf0be4e6940c731
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /5864290
Reviewed-by: Rune Lillesveen <[email protected]>
Auto-Submit: Anders Hartvoll Ruud <[email protected]>
Commit-Queue: Rune Lillesveen <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1355808}

--

wpt-commits: 08f0c2e7e7b808bd8227a2985a11271b905ab5f9
wpt-pr: 48194
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified-and-comments-removed that referenced this issue Sep 26, 2024
…ntative, a=testonly

Automatic update from web-platform-tests
[scope] Mark scope-shadow.html as non-tentative

The relevant issue has been resolved, and the spec has been edited.

w3c/csswg-drafts#9178

Change-Id: I218d98496e31d24e07a6a4e40bf0be4e6940c731
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /5864290
Reviewed-by: Rune Lillesveen <futharkchromium.org>
Auto-Submit: Anders Hartvoll Ruud <andruudchromium.org>
Commit-Queue: Rune Lillesveen <futharkchromium.org>
Cr-Commit-Position: refs/heads/main{#1355808}

--

wpt-commits: 08f0c2e7e7b808bd8227a2985a11271b905ab5f9
wpt-pr: 48194

UltraBlame original commit: ff3fb02123f7b931cc3be074606869978637f573
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified that referenced this issue Sep 26, 2024
…ntative, a=testonly

Automatic update from web-platform-tests
[scope] Mark scope-shadow.html as non-tentative

The relevant issue has been resolved, and the spec has been edited.

w3c/csswg-drafts#9178

Change-Id: I218d98496e31d24e07a6a4e40bf0be4e6940c731
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /5864290
Reviewed-by: Rune Lillesveen <futharkchromium.org>
Auto-Submit: Anders Hartvoll Ruud <andruudchromium.org>
Commit-Queue: Rune Lillesveen <futharkchromium.org>
Cr-Commit-Position: refs/heads/main{#1355808}

--

wpt-commits: 08f0c2e7e7b808bd8227a2985a11271b905ab5f9
wpt-pr: 48194

UltraBlame original commit: ff3fb02123f7b931cc3be074606869978637f573
gecko-dev-updater pushed a commit to marco-c/gecko-dev-comments-removed that referenced this issue Sep 26, 2024
…ntative, a=testonly

Automatic update from web-platform-tests
[scope] Mark scope-shadow.html as non-tentative

The relevant issue has been resolved, and the spec has been edited.

w3c/csswg-drafts#9178

Change-Id: I218d98496e31d24e07a6a4e40bf0be4e6940c731
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /5864290
Reviewed-by: Rune Lillesveen <futharkchromium.org>
Auto-Submit: Anders Hartvoll Ruud <andruudchromium.org>
Commit-Queue: Rune Lillesveen <futharkchromium.org>
Cr-Commit-Position: refs/heads/main{#1355808}

--

wpt-commits: 08f0c2e7e7b808bd8227a2985a11271b905ab5f9
wpt-pr: 48194

UltraBlame original commit: ff3fb02123f7b931cc3be074606869978637f573
i3roly pushed a commit to i3roly/firefox-dynasty that referenced this issue Sep 27, 2024
…entative, a=testonly

Automatic update from web-platform-tests
[@scope] Mark scope-shadow.html as non-tentative

The relevant issue has been resolved, and the spec has been edited.

w3c/csswg-drafts#9178

Change-Id: I218d98496e31d24e07a6a4e40bf0be4e6940c731
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /5864290
Reviewed-by: Rune Lillesveen <[email protected]>
Auto-Submit: Anders Hartvoll Ruud <[email protected]>
Commit-Queue: Rune Lillesveen <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1355808}

--

wpt-commits: 08f0c2e7e7b808bd8227a2985a11271b905ab5f9
wpt-pr: 48194
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Needs Edits
Development

No branches or pull requests

5 participants