demo · v131

Slot-Driven Layout

A magazine-style <article-card> component with five optional named slots: image, headline, kicker, body, and footer. CSS :has-slotted reads the combination of filled slots and chooses the right grid-template-areas layout — no JavaScript, no style attribute manipulation.

rendered card
placeholder

How CSS :has-slotted changes component authoring

Before :has-slotted, web component authors had to listen to slotchange events in JavaScript and imperatively toggle classes on the host element to react to which slots were filled.

Now, the CSS can directly query which slots have assigned nodes — enabling purely declarative, layout-responsive components.

the code

/* Grid changes based on which slots have content */
:host {
  display: grid;
  grid-template-areas: "headline" "body";
}

/* Add image column when image slot has content */
:host(:has(slot[name="image"]:has-slotted)) {
  grid-template-areas:
    "image headline"
    "image body";
  grid-template-columns: 40% 1fr;
}

/* Show kicker above headline when present */
:host(:has(slot[name="kicker"]:has-slotted)) {
  grid-template-areas:
    "kicker"
    "headline"
    "body";
}

/* Combined: image + kicker */
:host(
  :has(slot[name="image"]:has-slotted):has(slot[name="kicker"]:has-slotted)
) {
  grid-template-areas:
    "image kicker"
    "image headline"
    "image body";
  grid-template-columns: 40% 1fr;
}

see also