- From: Justin Fagnani <notifications@github.com>
- Date: Thu, 08 Jul 2021 15:08:21 -0700
- To: WICG/webcomponents <webcomponents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
Received on Thursday, 8 July 2021 22:09:10 UTC
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