v144 · css · demo

Nested Components

A 3-level deep shadow DOM hierarchy where the innermost custom element queries a container named page defined at the outermost document level. Before Chrome 144, that query was invisible inside shadow roots. Now it works.

Non-tree-scoped container-name: checking…

Drag the slider to watch all 3 shadow levels reflow simultaneously via a single @container page (…) query in each shadow root.

Level 1 — document (container-name: page)

Chrome 144+ (works)

Shadow CSS
@container page (max-width: 600px)
matches the outer document container despite 3 shadow boundaries. All components reflow together.

Pre-Chrome 144 (would fail)

Container names were tree-scoped. The inner shadow root had no visibility to page declared outside. The query would never match — components were stuck in wide-mode forever.

the API

<!-- Document: named container at level 1 -->
<div style="container-name: page; container-type: inline-size;">
  <outer-shell></outer-shell>    <!-- L2 shadow -->
</div>

<!-- Inside outer-shell shadow CSS -->
:host { display: block; container-type: inline-size; }
@container page (max-width: 600px) {
  /* ✅ Chrome 144+: matches the document-level "page" container */
  .layout { flex-direction: column; }
}

<!-- Inside mid-shell shadow CSS (L3) -->
@container page (max-width: 600px) {
  /* ✅ Also matches! Three levels deep, still works. */
  .content { font-size: 0.9rem; }
}

<!-- Inside inner-card shadow CSS (L4) -->
@container page (max-width: 600px) {
  /* ✅ Innermost level, still reaches the outer container. */
  :host { background: var(--bg-stone); }
}

see also