demo · v131
Optional icon slot — the icon-button case
The canonical use case for :has-slotted: an icon-button component where the icon slot is optional. Without it, the button needs left padding for label-only mode. With it, you can shift padding only when the icon is actually present — no observers, no JS.
Same component, three instances. Padding adapts automatically because the shadow root uses :has-slotted.
the shadow css
:host {
display: inline-flex; align-items: center;
gap: 0;
padding: 0.5rem 1rem;
border: 2px solid black; background: white;
font-family: monospace;
}
/* Add gap only when the icon slot has content */
:host(:has(slot[name=icon]:has-slotted)) {
gap: 0.5rem;
}
/* Reserve no space for the icon when slot is empty */
slot[name=icon]:not(:has-slotted) { display: none; }