demo · v142

Shadow DOM Container Query Playground

Before Chrome 142, a container query inside a shadow root could only match containers within that same shadow tree. Now container names are matched globally across tree boundaries. Write light-DOM and shadow-DOM CSS in the editors below, pick a preset, and watch queries fire across the shadow boundary — then toggle "before v142" to see what used to break.

presets:
light-DOM CSS (host / container definition)
shadow-DOM CSS (query inside shadow root)
v142+ — non-tree-scoped: shadow DOM sees light-DOM container names
rendered output (shadow DOM inside blue border)
host width 500px
host height 140px
live query report
Apply CSS to see which container queries fired.

relevant CSS

/* Light DOM — defines the named container */
.card-host {
  container-type: inline-size;
  container-name: card;   /* name visible across tree boundaries (Chrome 142+) */
}

/* Shadow DOM internal stylesheet */
/* Before v142: @container card { } would NOT match the light-DOM container */
/* After  v142: it DOES match — names are not tree-scoped */
:host {
  display: block;
}
@container card (min-width: 400px) {
  .inner { flex-direction: row; }
}

see also