demo · v131

::slotted matched by :has-slotted

The new :has-slotted pseudo lets a shadow root tell the difference between "slot is empty" and "slot has assigned light DOM". Toggle whether the slot is filled and watch each card's badge change.

Hello from light DOM!

the shadow css

:host { border: 2px solid #000; padding: 1rem; }
slot:has-slotted          { color: var(--text-black); }
slot:not(:has-slotted)    { color: var(--text-muted); font-style: italic; }
.badge {
  background: var(--accent-rose);
  color: var(--bg-ivory);
}
:host(:has(slot:has-slotted)) .badge {
  background: var(--accent-emerald);
}

see also