demo · v131

empty-state vs filled-state in one component

A <notification-list> renders an empty-state illustration in its slot's fallback. When the page slots real items, the fallback disappears and a heading bar takes its place. :has-slotted is the only way to flip these in pure CSS — previously the component had to listen for slotchange and toggle a class.

filled (slotted)

build #421

deployed by ci · 2m ago

PR #1942

merged · 5m ago

empty (fallback)

the api

/* In the shadow tree */
:host { display: block; }
.header { display: none; }
.empty-state { display: block; }

slot[name="item"]:has-slotted ~ .header { display: block; }
slot[name="item"]:has-slotted ~ .empty-state { display: none; }

see also