← Back to release summary

CSS Container Queries flat tree lookup

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 130)
Intent stage
None

Summary

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, even if the CSS rule does not use ::part() or ::slotted().

Motivation

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. Firefox shipped the flat tree behavior in the first place and claim to have run into issues with the missing interop.

Standards & signals

View on chromestatus.com