v130 · css

CSS Container Queries flat tree lookup

Look up query containers in the flat tree ancestor order instead of shadow-including order. The specification for container queries changed to look up flat tree ancestors. This change is only relevant for shadow DOM where an element will now be able to see non-named containers inside shadow trees into which the element or one of its ancestors are slotted,

concepts

  1. Flat-tree CQ Lookup

    Slider resizes the host container; the slotted content inside reads @container against the host's named container — flat-tree lookup in action.

  2. Shadow vs flat ancestry

    The interop story: shows the same component with its two trees side by side. The shadow-including ancestor walk could not see the named container that is the slotted element's flat-tree parent — Chrome 130 aligns with Firefox by switching to the flat tree.

  3. Slotted-component responsiveness

    Web component with slotted light-DOM content. Drag a resizer on the host container; the slotted nodes reflow because Chrome 130's flat-tree lookup lets them see the host's @container. A toggle switches to a simulated pre-130 broken state where the slot stays frozen.

  4. CQ Flat-Tree Inspector

    Click nodes in a visual flat-tree diagram to see their container query lookup path. Resize the container and watch the query match status update live — showing exactly how Chrome 130's flat-tree resolution crosses shadow DOM boundaries.

why it shipped

The previous specification tried to ensure shadow DOM encapsulation, but it was not what authors expected. They would expect queries to work on the box tree and not skip containers in shadow trees where elements in the ancestor chain were slotted in.

references