demo · v144

Shadow Bridge

Three custom elements (<article-card>, <profile-card>, <data-card>), each with its own shadow root. The page declares one container named --layout on the parent. Pre-144, each shadow root saw its own tree scope and didn’t know the container existed. v144 drops the tree-scope match so every component reacts to the same container query.

container queries: checking…

drag the bottom-right resize handle of the box below to change the container width:

resize and watch each shadow component restack: the layout changes via @container --layout (...) queries declared inside each shadow root.

the API

// page
<div style="container-name: --layout; container-type: inline-size;">
  <article-card></article-card>
</div>

// component shadow CSS
:host { display: block; }
@container --layout (min-width: 480px) {
  .body { font-size: 1.2rem; }
}
// pre-144: the @container above never matched because --layout was
// scoped to the document tree. v144: name matches regardless of scope.

see also