:has-slotted

Developer use cases

• Styling on slotted content is a major facet of the composition story in custom elements leveraging shadow DOM. Sometimes it's just a matter of a little bit of extra spacing you'd like to included when there's additional content (like in a button with text _and_ an icon, instead of just text), but other times it's lighting up whole other features due to the slotted contents on the element and being able to do all of these things without JS would be amazing

  Styling on slotted content is a major facet of the composition story in custom elements leveraging shadow DOM. Sometimes it's just a matter of a little bit of extra spacing you'd like to included when there's additional content (like in a button with text _and_ an icon, instead of just text), but other times it's lighting up whole other features due to the slotted contents on the element and being able to do all of these things without JS would be amazing [see original comment]
• I maintain the Lit SSR library. When our users need to style an element based on whether certain slots are filled, they have to use JavaScript to do it. We don't support the slot API in Lit SSR - we just emit declarative shadow DOM with whatever `<slot>`s they have, emit the light DOM, and let the browser do projection. Supporting slots would be very complicated and hurt performance. It would involve parsing HTML, changing our streaming approach (we'd have to delay emitting shadow roots), and performing slot assignment ourselves. Instead we just don't support these use cases. These types of components just don't style correctly until JS loads and the components hydrate. `:has-slotted` would let our users eliminate this JS and SSR'ed components to style correctly when they have slotted content, before JS loads.

  I maintain the Lit SSR library. When our users need to style an element based on whether certain slots are filled, they have to use JavaScript to do it. We don't support the slot API in Lit SSR - we just emit declarative shadow DOM with whatever `<slot>`s they have, emit the light DOM, and let the browser do projection. Supporting slots would be very complicated and hurt performance. It would involve parsing HTML, changing our streaming approach (we'd have to delay emitting shadow roots), and performing slot assignment ourselves. Instead we just don't support these use cases. These types of components just don't style correctly until JS loads and the components hydrate. `:has-slotted` would let our users eliminate this JS and SSR'ed components to style correctly when they have slotted content, before JS loads. [see original comment]
• At red hat, we maintain a web components design system, in which we have elements like ``` <rh-card> <h2 slot=header>...</h2> <p>...<p> <rh-button slot=footer>...</rh-button> </rh-card> ``` Not every card instance has content in the named slots, so we need to hide those slots in the case that they're empty: ```css #footer :has-slotted(*) { display: none; } ```

  At red hat, we maintain a web components design system, in which we have elements like ``` <rh-card> <h2 slot=header>...</h2> <p>...<p> <rh-button slot=footer>...</rh-button> </rh-card> ``` Not every card instance has content in the named slots, so we need to hide those slots in the case that they're empty: ```css #footer :has-slotted(*) { display: none; } ``` [see original comment]