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] :scope > * matches nothing in shadow trees #11188

Open
andruud opened this issue Nov 12, 2024 · 1 comment
Open

[css-scoping] :scope > * matches nothing in shadow trees #11188

andruud opened this issue Nov 12, 2024 · 1 comment
Labels
css-scoping-1 Current Work

Comments

@andruud
Copy link
Member

andruud commented Nov 12, 2024

In #7261 (cc @emilio), @tabatkins concludes that:

myshadowroot.querySelector(":scope > *") returns all the root nodes in the shadow tree.

But no it doesn't: in the context of a shadow tree, the shadow root is specified to be replaced by the shadow host for the purposes of selector matching. This means that the node :scope represents here doesn't exist as far as selector matching is concerned. https://drafts.csswg.org/css-scoping-1/#host-element-in-tree

@andruud andruud added the css-scoping-1 Current Work label Nov 12, 2024
@tabatkins
Copy link
Member

Oof, that's an accidental interaction. Maybe we can just special-case that and say that, when calling querySelector() on a shadow root, the :scope represents the shadow host.

(The shadow root is, itself, not selectable anyway, as it doesn't exist in the tree as far as Selectors is concerned.)

chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Nov 13, 2024
This special path causes :scope selectors to incorrectly match
':scope *' selectors in shadow roots, when it actually should
match nothing [1].

The provided test scope-pseudo-in-shadow.html is passing in Firefox
and Safari. The existing WPT scope-selector.html (all browsers currently
passing) cover querySelector[All] cases well for shadow roots, document,
and other DocumentFragments. There should be no behavior change there.

Fixed: 378698644

[1] w3c/csswg-drafts#11188
[2] w3c/csswg-drafts#7261

Change-Id: I1efbf999864a766ad5dfaee1fd67527309e38107
aarongable pushed a commit to chromium/chromium that referenced this issue Nov 13, 2024
This special path causes :scope selectors to incorrectly match
':scope *' selectors in shadow roots, when it actually should
match nothing [1].

The provided test scope-pseudo-in-shadow.html is passing in Firefox
and Safari. The existing WPT scope-selector.html (all browsers currently
passing) cover querySelector[All] cases well for shadow roots, document,
and other DocumentFragments. There should be no behavior change there.

Fixed: 378698644

[1] w3c/csswg-drafts#11188
[2] w3c/csswg-drafts#7261

Change-Id: I1efbf999864a766ad5dfaee1fd67527309e38107
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6011808
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Anders Hartvoll Ruud <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1382339}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Nov 13, 2024
This special path causes :scope selectors to incorrectly match
':scope *' selectors in shadow roots, when it actually should
match nothing [1].

The provided test scope-pseudo-in-shadow.html is passing in Firefox
and Safari. The existing WPT scope-selector.html (all browsers currently
passing) cover querySelector[All] cases well for shadow roots, document,
and other DocumentFragments. There should be no behavior change there.

Fixed: 378698644

[1] w3c/csswg-drafts#11188
[2] w3c/csswg-drafts#7261

Change-Id: I1efbf999864a766ad5dfaee1fd67527309e38107
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6011808
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Anders Hartvoll Ruud <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1382339}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Nov 13, 2024
This special path causes :scope selectors to incorrectly match
':scope *' selectors in shadow roots, when it actually should
match nothing [1].

The provided test scope-pseudo-in-shadow.html is passing in Firefox
and Safari. The existing WPT scope-selector.html (all browsers currently
passing) cover querySelector[All] cases well for shadow roots, document,
and other DocumentFragments. There should be no behavior change there.

Fixed: 378698644

[1] w3c/csswg-drafts#11188
[2] w3c/csswg-drafts#7261

Change-Id: I1efbf999864a766ad5dfaee1fd67527309e38107
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6011808
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Anders Hartvoll Ruud <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1382339}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-scoping-1 Current Work
Projects
None yet
Development

No branches or pull requests

2 participants