demo · v130

CQ Flat-Tree Inspector

Chrome 130 changes container query lookup to use the flat tree rather than the DOM tree. This matters when slotted elements cross shadow DOM boundaries — a container on the host now correctly sizes slotted content, even though that content lives inside a shadow root in the DOM tree. Click nodes in the tree below to see which container answers each element's query.

Detecting container query support…

Flat tree (what the browser sees)

Select a node above

Live query results

Container width: 420px

Select a node to see its flat-tree ancestor path

DOM tree vs flat tree

DOM tree lookup (pre-130)

Slotted element lives in host document.
Shadow root is a separate tree.
Container query walks up DOM tree.

→ Skips the host's container declaration
→ Slotted child can't see host container
→ CQ only finds containers inside shadow

Result: unexpected sizing, workarounds needed.

Flat tree lookup (Chrome 130+)

Flat tree merges host + shadow tree.
Slotted elements appear inside host context.
Container query walks up flat tree.

→ Finds host container correctly ✓
→ Slotted child inherits host sizing ✓
→ Correct cross-shadow CQ resolution ✓

Result: component libraries compose correctly.

/* Host document — has a container */
.host-grid {
  container-type: inline-size;
  container-name: host-container;
  width: 400px;
}

/* Slotted child inside shadow DOM */
/* Pre-Chrome 130: this CQ didn't see .host-grid */
@container host-container (width < 500px) {
  ::slotted(.card) {
    flex-direction: column;
  }
}

/* Chrome 130: flat-tree lookup finds .host-grid ✓ */
/* The slotted child now responds to the host container */

DOM tree vs flat tree

see also