demo · v142

Container name cross-shadow

An outer host declares container-name: dashboard. A custom element inside has its own shadow root with @container dashboard (min-width: 320px). Drag the resize handle on the container — in Chrome 142+ the rule in the shadow root sees the outer container name and the layout switches.

container width 560px

outer container · container-name: dashboard

shadow-rooted <data-card>

@container dashboard query state

—

spec compliance

Chrome 142+ / Firefox

Before this change, @container dashboard (…) inside a shadow tree only matched containers declared in the same tree. The new rule lets shared design-system stylesheets target outer named containers.

relevant API

/* outer light-DOM */
.layout { container-type: inline-size; container-name: dashboard; }

/* inside the shadow root of <data-card> */
@container dashboard (min-width: 320px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

relevant API

see also