demo · v130

Flat-tree container lookup

Drag the slider to resize the host container. The slotted shadow-DOM content inside reads @container card against the host's container — flat-tree lookup, not shadow-tree lookup. Watch the slot change colour as the host crosses 420px.

lookup mode:
350px

.host-container { container-type: inline-size; container-name: card; }

Slotted text — styled via @container card

the code

// Custom element:
class MyCard extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: "open" }).innerHTML =
      '<div class="slotted-content"><slot name="body"></slot></div>';
  }
}
customElements.define("my-card", MyCard);

/* CSS — declared on light DOM, applied to slotted content via flat-tree lookup */
@container card (min-width: 420px) {
  .slotted-content { background: var(--accent-blue); color: var(--bg-ivory); }
}

see also