demo · v144

Container Scope

Resize the shadow-DOM host with the slider — the light-DOM stylesheet (defined out here) matches against --shell which lives inside the shadow root. In Chrome 144 the @container query reaches through the shadow boundary; before, the query never matched.

shadow host is the dashed box · the @container query in this document's CSS targets it

host (shadow root contains --shell)

cross-tree container-name lookup: checking…

the CSS

/* defined OUTSIDE the component shadow root */
@container --shell (min-width: 480px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@container --shell (min-width: 700px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

/* the --shell container-name is declared INSIDE the shadow root.
   Before 144 the query never matched. In 144 the lookup is non-tree-scoped. */

see also