Bug 304555
| Summary: | Named Style Container Queries on :host fail for Slotted Elements | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | oscar7600 |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | afrehner.work, koivisto, rniwa |
| Priority: | P2 | ||
| Version: | Safari 26 | ||
| Hardware: | Unspecified | ||
| OS: | macOS 26 | ||
| URL: | https://lit.dev/playground/#gist=8601556f4a13e49eb85743791f21157d | ||
| See Also: |
https://bugs.webkit.org/show_bug.cgi?id=289868 https://bugs.webkit.org/show_bug.cgi?id=295838 |
||
oscar7600
Safari 26.2 now resolves container-name matching regardless of origin, a discrepancy remains: named style container queries defined on :host are not applied to slotted elements.
While unnamed queries were recently fixed for the composed tree, https://github.com/WebKit/WebKit/commit/a20439aa1afd56e3b8e0f4af7c899ac98237fa3d, the same logic fails in Safari when a container-name is involved.
Currently, ✅Chrome correctly evaluates the query, but ❌Safari (26.2 and Safari Technology Preview 234) requires the container to be defined in the Light DOM to work.
Reproduction:
https://lit.dev/playground/#gist=8601556f4a13e49eb85743791f21157d
Steps to reproduce:
1. Open the playground in **Safari** and **Chrome**.
2. Observe that in Safari, the background color is **not** applied to the slotted element.
3. In `index.html`, uncomment the following block:
```css
parent-element {
/* container-name: slotted; */
}
```
4. Notice it now works in Safari. This confirms the issue only exists when the container is defined via `:host` in the Shadow DOM.
- Expected Behavior: Slotted elements should resolve container queries against a named container defined on the `:host`
- Actual Behavior (Safari): Slotted elements ignore named containers defined on `:host`
References
- Related Fix: https://github.com/WebKit/WebKit/commit/a20439aa1afd56e3b8e0f4af7c899ac98237fa3d
- Relevant Commit: https://github.com/WebKit/WebKit/commit/efd4ebe98cab2bbb385ffe1e1e40d3870917727b
- Container-names are tree-scoped: https://bugs.webkit.org/show_bug.cgi?id=289868
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Anthony Frehner
Was able to get this down to a bare reproduction; I have a PR up to WPT to add this test case here https://github.com/web-platform-tests/wpt/pull/56899