v144 · css

Non-Tree-Scoped container-name Matching

Ignore tree-scope when matching container-name for @container queries.

concepts

  1. Container Scope

    Container names now match across shadow boundaries. Lets design systems share container definitions between encapsulated components.

  2. Design System Container

    Design-system @container rules now match a host's container name regardless of which stylesheet they came from. Slider the host width and watch the card adapt.

  3. Shadow Bridge

    Three different custom elements with their own shadow roots, all reacting to the same outer container name. Resize the host and watch each component restack via its own internal @container rules.

  4. Nested Components

    Three levels of custom elements deep — the innermost shadow CSS queries a container name declared at the top-level document. Drag the width slider and all three levels reflow via the same @container page rule.

why it shipped

Aligning with the spec change and Firefox implementation.

references