Support for pseudo elements with ::slotted() selectors

[ghost]

This was discussed in Issue #331 but I don't think we came to a conclusion.

The CSS Scoping spec does not explicitly disallow pseudo elements in the "selector list" like the specs for :not() and :matches() do. Neither does it currently explicitly allow pseudo elements after ::slotted.

Should we:

1. Not support other pseudo elements on ::slotted selectors
2. Support other pseudo elements inside ::slotted(): ::slotted(div::before)
3. Support other pseudo elements after ::slotted(): ::slotted(div)::before

@hayatoito @tabatkins

[abdonrd]

Thanks for register! I would like use it.

Example: https://jsbin.com/jamiyitace/edit?html,output

[tabatkins]

The pseudo-elements aren't slotted, so (2) is out.

(3) works for me from a spec perspective, and seems useful for authors; there's no good reason behaviorally to disallow it, I think? Only question is if it's reasonable engine-wise.

[rniwa]

The last time we discussed this, the question was what would happen if the slotted element had already specified ::before. Given we've defined the cascading order for slotting, that should no longer be a question?

[TakayoshiKochi]

I think cascading order or specificity of these selectors are already clear in the current spec.

[ghost]

Generated content like ::before should match rules from the same scopes and using the same cascading order as the actual element, I presume.

[tabatkins]

Yeah, there's no reason to be different there.

[ghost]

Regarding engines, implementing this in Blink is just a matter of allowing it in the selector parser. Adding a simple check made ::before/::after/::first-line/::first-letter seemingly work out-of-the-box.

[ghost]

An admissive Blink implementation with tests: https://chromium-review.googlesource.com/c/616042

[abdonrd]

Thanks @rune-opera! 👏

[ghost]

So, the proposal is to resolve as option (3). Allow pseudo element after ::slotted() like: ::slotted(*)::before.

Should this be scheduled for resolution at a csswg telcon?

[tabatkins]

Done w3c/csswg-drafts#1747

[tabatkins]

And done; the tree-abiding pseudos (::before, ::after, ::marker, and ::placeholder) can all go after ::slotted() now.

[abdonrd]

@rune-opera @tabatkins and the selectors like :hover, :first-child, etc should be inside the ::slotted(), right?

::slotted(div:first-child) {}

[ghost]

@abdonrd Yes.

[abdonrd]

Thanks! :)

[abdonrd]

Thanks @robdodson for filled at Webkit! https://bugs.webkit.org/show_bug.cgi?id=178237

[heruan]

Does ::slotted(div:first-child) {} select the :first-child in the slot, or in the light DOM?

<dom-module id="my-element">
  <template>
    <style>
      slot[name="a"]::slotted(div:first-child) {
        background-color: red;
      }
    </style>
    <slot></slot>
    <slot name="a"></slot>
  </template>
</dom-module id="my-element">

<my-element>
  <div>Bar</div>
  <div slot="a">Foo</div>
  <div slot="a">Bar</div>
</my-element>

Is "Foo" supposed to have a red background? In latest Chrome, it doesn't.

[web-padawan]

@hayatoito Do I understand correctly that this has been only implemented in Blink for ::before and ::after, but not for the ::placeholder?

The following CSS doesn't work in Chrome, Safari and Firefox:

::slotted(input)::placeholder {
  color: red;
}

Live example: https://jsfiddle.net/webpadawan/v3ksqhcx/

[hayatoito]

@web-padawan
Could you file a bug in http://crbug.com/ for Blink?

[emilio]

Works in Firefox Nightly FWIW, and I think @lilles fixed it on Blink too.

[lilles]

Fixed: https://crbug.com/902518

[alexstep-dev]

Would be grate to use this kind of selectors:

::slotted(div[slot="content"]::-webkit-scrollbar) {
  display: none;
}

[annevk]

@BinaryCry feature requests are best done in a new issue, though please take https://whatwg.org/faq#adding-new-features into account. Thanks!

[egucciar]

Anyone else observing that Safari and Chrome on iOS are not working with this ?

[rniwa]

WebKit bug tracks the issue on iOS.

[xgqfrms]

::slotted & :host

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

https://developer.mozilla.org/en-US/docs/Web/CSS/:host

https://developers.google.com/web/fundamentals/web-components/shadowdom

demo

/* Selects any element placed inside a slot */

::slotted(*) {
  font-weight: bold;
}

/* Selects any <span> placed inside a slot */
::slotted(span) {
  font-weight: bold;
}

/* Selects a shadow root host */
:host {
  font-weight: bold;
}

[web-padawan]

Here is another WebKit bug for ::slotted(input)::placeholder support.