Webcomponents: Can I style a slotted element by its slot name?

[jonathantneal]

Hello, I’m styling a slotted image like this — ::slotted([slot="image"]) — and I was immediately curious; is there a more meaningful or elegant way of selecting a slot by its slot name? I’m looking for something like ::slotted-by-name(image) (this is a horrible name) but I haven’t stumbled upon anything like this.

https://codepen.io/jonneal/pen/yZQNKb?editors=1010

[rniwa]

I think a more canonical way to do that would be [slot=image]::slotted(*). Or if the slot element had an id then yourSlotID::slotted(*).

[hayatoito]

Yep, we can use slot[name=image]::slotted(*), I think.

Note that ::slotted(*) is equivalent to *::slotted(*); The universal selector (*) before pseudo element (::slotted) can be omitted. So you can use any selector before ::slotted(*) to select a specific slot element.

[rniwa]

Please let us know if above comments don't answer your question. Closing the issue for now.

[jonathantneal]

Yes, it did, though only just this moment. It took me some time to sort it out, because I was confusing references to slots in the template vs slots in the Custom Element. Thanks for closing this out. 😄