[WICG/webcomponents] CSS selector to style slots with slotted elements (#936)

We've seen a number of elements that style slots based on whether the slot as slotted contents. Right now these elements use the `slotchange` event to look at assigned elements and set some state that triggers rendering of the class. This approach can lead to extra rendering work and complicate server-side rendering.

It would nice nice to skip JS completely for this styling use case and be able to use some selector, possibly a pseudo-class, to style the slot:

```css
#label-slot:hasSlotted(*) {
  padding: 0 8px;
}
```

Maybe it's possible that `:has()` will be useful for this case, but I'm not sure. Does this selector even make sense with mixed scopes: `#label-slot:has(::slotted(*))`?

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/936

Received on Thursday, 8 July 2021 22:09:10 UTC