demo · v142

Scope Conflict Resolver

Before Chrome 142, an @container my-app rule defined in light DOM couldn't see a container named my-app declared inside a shadow tree (and vice versa). Today, the name resolves across all tree scopes — component libraries can ship rules that bind to host-page containers. That can also bite when two trees use the same name.

light DOM <body>
light DOM <main container-name="sidebar">
shadow root <widget-card>
shadow DOM @container sidebar { … }
Chrome ≤ 141 behaviour —
Chrome 142+ behaviour —

live demo

Resize the viewport — the badge inside the (simulated) shadow tree responds to the outer container query.

container outer-shell (>= 500px in width)

queries outer-shell from inside

relevant markup

<body>
  <main style="container-name: sidebar; container-type: inline-size;">
    <widget-card>
      #shadow-root
        <style>
          /* Chrome 142+: this rule sees the host's container. */
          @container sidebar (min-width: 600px) {
            .card { grid-template-columns: 2fr 1fr; }
          }
        </style>
    </widget-card>
  </main>
</body>

see also