Back to all features
:has-slotted
The :has-slotted CSS pseudo-class matches <slot> elements where the fallback content is not shown. The pseudo-class matches any slotted content, including white space, text nodes, or elements.
Community use cases (3)
Community signal summary
Developers strongly advocate for native
:has-slottedCSS selectors to style Web Components conditionally based on slot projection without requiring JavaScript [1][2][3]. Key use cases include layout adjustments for optional component slots [1] and hiding empty named slot containers in enterprise design systems [3]. An engineer at Adobe [1] and a maintainer of Lit SSR [2] emphasized that the absence of this feature critically impacts Server-Side Rendering (SSR) and Declarative Shadow DOM (DSD), causing components to flash unstyled prior to client-side hydration [1][2]. Server-side slot projection is architecturally non-viable for streaming frameworks, as it introduces complex HTML parsing and severe performance penalties [2].To handle this today, developers resort to brittle workarounds with steep maintenance penalties. Reported workarounds include client-side
MutationObserverscripts [1], customssr-hintattributes [3], or publishing light DOM stylesheets using:has(), which breaks Shadow DOM encapsulation [3]. Sentiment across enterprise design system maintainers at Red Hat [3] and Adobe [1] is overwhelmingly positive, viewing:has-slottedas an essential feature to unlock declarative, zero-JS styling across SSR and web platforms [1][2][3].Generated by AI from community comments and may contain inaccuracies. Read the comments below for full developer context.
This summary covers all 3 comments, is up to date, and was last updated on September 5, 2026.
What I want to do with this feature
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
What I'm having to do in the meantime
Leveraging a mutation observer to keep track of the DOM tree the custom element has been deployed in in order to resolve the current state of slotted content within it. The particularly causes issues when attempting to use this data in an SSR'd delivery, as it's not possible to accurately deliver the JS alternative at the time during which the Declarative Shadow DOM is being drawn.
What I want to do with this feature
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-slottedwould let our users eliminate this JS and SSR'ed components to style correctly when they have slotted content, before JS loads.What I'm having to do in the meantime
This is completely blocking for us. We cannot take on the complexity of server-side projection.
What I want to do with this feature
At red hat, we maintain a web components design system, in which we have elements like
Not every card instance has content in the named slots, so we need to hide those slots in the case that they're empty:
What I'm having to do in the meantime
We have to either use expensive and complex ssr-hint attrs like
or we have to ship light dom stylesheets that use
:has, which break encapsulation and burden downstream with maintenance requirements