v131 · css

:has-slotted pseudo selector

The :has-slotted pseudo class represents a slot element with slotted content, such as a text node or element. This can be used to style elements based on whether or not they are using slot fallback content.

concepts

  1. :has-slotted

    :has-slotted matches slots that have actual assigned content. Distinguish 'empty slot' from 'slot with default content' in styles.

  2. Optional icon slot

    An icon-button web component: padding adapts only when the icon slot has content — the canonical use case.

  3. Empty-state component

    A notification-list that swaps between an empty-state illustration and a heading bar entirely in CSS — no slotchange listener.

  4. Per-named-slot layout

    A profile card with three optional named slots (avatar, bio, actions). Layout reflows when each slot is filled or empty.

  5. Slotted Counter

    A <step-tracker> component with up to four step slots. CSS :has-slotted detects how many are filled and switches the grid: one column for a single step, half/half for two, thirds for three, quarters for four. Toggle steps on and off to see the grid reflow with zero JavaScript layout logic.

  6. Slot-Driven Layout

    A magazine-style <article-card> with five optional slots (image, kicker, headline, body, footer). CSS :has-slotted reads the slot combination and picks the right grid-template-areas layout: headline-only, photo + headline, full editorial card, or footer-enabled strip — all without touching JavaScript or the style attribute.

why it shipped

The :has-slotted pseudo class represents a slot element with slotted content, such as a text node or element. This can be used to style elements based on whether or not they are using slot fallback content.

references