v142 · css

Non-Tree-Scoped container-name Matching

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

concepts

  1. Container name cross-shadow

    Drag the slider to resize the outer container — a shadow-rooted custom element's @container dashboard rule flips layout. Chrome 142+ resolves the name across the shadow boundary; older browsers ignore it.

  2. Component Library Across Shadow Trees

    The pre-Chrome-142 footgun design-system authors flagged: a vendored <vendor-card> with its own shadow root and @container sidebar / main-pane rules now sees the host's container names — same component drops in anywhere without re-naming.

  3. Scope Conflict Resolver

    Walk through four name combinations on a host-and-shadow tree — match, no match (rule side), no match (host side), and the new collision case where both define the same name. See exactly how the Chrome 142 resolution rule changed.

  4. Shadow DOM Container Playground

    Build a live custom element with its own shadow root, assign container-name on both the host and shadow internals, then write @container rules and watch which elements respond. A toggle switches between pre-Chrome-142 (tree-scoped) and Chrome 142 (non-tree-scoped) matching to show the resolution difference.

why it shipped

Aligning with the spec change and Firefox implementation.

references