New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 710797 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner:
Last visit > 30 days ago
Closed: Jun 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment

Matching slotted elements using querySelector API fails with ::slotted()

Project Member Reported by kochi@chromium.org, Apr 12 2017

Issue description

When a user wants to retrieve some specific elements in shadow slots,
something like shadowRoot.querySelector("::slotted(.red)") could
work, but currently this fails on Blink.

Demo:
http://jsbin.com/jafetekipi/edit?html,js,output

This is because currently querySelector() checks if selector contains
pseudo elements and returns empty.

 

Comment 1 by kochi@chromium.org, Apr 12 2017

According to the MDN article:

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
> CSS Pseudo-elements will never return any elements,
> as specified in the Selectors API

which refers to (older, level1) Selectors API:
https://www.w3.org/TR/selectors-api/#grammar
> Authors are advised that while the use of pseudo-elements in selectors
> is permitted, they will not match any elements in the document, and thus
> would not result in any elements being returned. 

Rune introduced pre-filter of pseudo elements for querySelector in
https://codereview.chromium.org/1602833002

I cannot find the original note which was in older spec in the latest
selectors level4 spec, though:
https://drafts.csswg.org/selectors-4/

Anyway, to allow returning what is expected here, we have several options
- explicitly exclude ::slotted() in filtering for querySelector
- change ::slotted() to something other than pseudo-element (e.g. combinator)
- etc.

Comment 2 by kochi@chromium.org, Apr 12 2017

Looks like querySelector() API is split out of selectors-api spec, and
the selectors-4 spec is purely for CSS selectors, and querySelectorAPI()
is now part of DOM spec: https://dom.spec.whatwg.org/
But I cannot find any notes on matching pseudo-elements in querySelector().

So if excluding any pseudo-elements in querySelector is not a *requirement*,
then we can return matched elements for ::slotted(), just like what we do
for '>>>' (shadow-piercing combinator) use in querySelector, without changing
any spec.

Comment 3 by hayato@chromium.org, Apr 14 2017

Status: Available (was: Untriaged)

Comment 4 by kochi@chromium.org, Apr 18 2017

Maybe ::part() should match as well, once CSS shadow parts (formerly called
custom pseudo element) is implemented.
https://tabatkins.github.io/specs/css-shadow-parts/

Comment 5 by hayato@chromium.org, May 26 2017

Owner: kochi@chromium.org
Status: Assigned (was: Available)
kochi@, could you work on this?

Comment 6 by kochi@chromium.org, Jul 13 2017

Upstream spec issue filed at:
https://github.com/whatwg/dom/issues/463

Once upstream issue is decided whether we allow returning elements which
live in different tree than the context object for querySelector() et al.,
I'll work on matching the spec.

Comment 7 by kochi@chromium.org, Jul 13 2017

Status: ExternalDependency (was: Assigned)

Comment 8 by kochi@chromium.org, Jun 18 2018

Status: WontFix (was: ExternalDependency)
The upstream issue is closed and this is working as the spec says.

Sign in to add a comment