Bug 267793 – CSS container queries don't work with Shadow DOM :host selector

• Status: NEW
• Component: CSS

[Sage Fennel]

Created attachment 469473 [details]
standalone HTML file used to reproduce the behavior

Safari's behavior around CSS container queries mixed with shadow DOM is different than both Chrome and Firefox.

The short version of what I want to do is to use shadow DOM and put `:host { container: my-container-name; }` inside a style tag in shadow DOM, then use a `@container` query to respond to the size of the host element changing.

I made a CodePen to reproduce the issue. You can load it in Safari 17 or Safari Technology Preview and reproduce the issue by resizing the browser horizontally. In Safari it seems that you need to put the `container` property on a different element besides `:host` for it to work.

Admittedly, I'm not sure if Safari is following the spec correctly or not here. I mean, I can see how it seems a bit ambiguous whether that container name should actually be visible inside the shadow DOM since it's defined on an element that's technically outside of it. If this is actually spec compliant, I'm happy to close this issue and open issues with Chrome and Firefox instead.

https://codepen.io/wavebeem/pen/RwdVvJO

I've also included the full reproduction as a standalone HTML file in the attachments.

[Radar WebKit Bug Importer]

<rdar://problem/121289354>

[Egor Kloos]

Looks like the same bug. Adding it here as a reference. 
https://bugs.webkit.org/show_bug.cgi?id=267046