demo · v131
per-named-slot layout switch
A profile card has three named slots: avatar, bio, and actions. Each can be present or missing. :has-slotted drives layout changes per-slot: with no avatar, the card collapses to a text card; with no actions, the bottom rail disappears; with no bio, the title and metadata get a vertical stack.
Building the open web. Developer Relations Engineer at Google.
the api
/* Shadow root */
:host { display: block; padding: 1rem; }
.row { display: flex; gap: 0.8rem; }
/* No avatar - drop the figure column */
slot[name="avatar"]:not(:has-slotted) ~ .figure { display: none; }
slot[name="avatar"]:has-slotted ~ .figure { display: block; }
/* No bio - tighten the body */
slot[name="bio"]:not(:has-slotted) ~ .body { gap: 0; }
/* No actions - kill the footer rail */
slot[name="actions"]:not(:has-slotted) ~ .actions-rail { display: none; }