Bug 295838

This repository demonstrates a bug in Safari where CSS Container Queries using style queries (`@container style()`) do not work correctly when CSS custom properties are inherited through intermediate DOM nodes in slotted content within Web Components. https://stackblitz.com/edit/vitejs-vite-wm1u7wmx?file=README.md The Issue When using CSS Container Queries with style queries in Safari, there's inconsistent behavior depending on how the CSS custom property is defined: 1. Setting the property directly on `:host` - works correctly 2. Setting the property on an intermediate container node (`.container`) - fails for slotted content Working Scenario (Safari ✅) When the parent element sets a CSS custom property directly at the host level: ```css :host([surface='dim']) { --surface: dim; } ``` Child elements with style container queries work as expected: ```css @container style(--surface: dim) { :host { background-color: #cee36a; color: #2c3400; } } ``` Broken Scenario (Safari ❌, Chrome ✅) When the parent element sets the CSS custom property on an intermediate container node (`.container`) instead of directly on `:host`: ```css :host([surface='dim']) .container { --surface: dim; } ``` Or even without any conditions: ```css :host .container { --surface: dim; } ``` With this HTML structure: ```html <div class="container"> <div> <p>Container</p> <child-element>Child element in Shadow DOM</child-element> <slot name="container"></slot> </div> </div> ``` Result in Safari: ✅ `<child-element>` inside Shadow DOM: Style container query works ❌ `<child-element>` slotted content: Style container query fails Result in Chrome: ✅ Both cases work correctly Live Demo You can see and test this bug in action here: [https://stackblitz.com/edit/vitejs-vite-wm1u7wmx?file=README.md](https://stackblitz.com/edit/vitejs-vite-wm1u7wmx?file=README.md) How to Reproduce 1. Open the StackBlitz demo in Safari 2. Click the "Toggle Dim attribute" button 3. To test different scenarios, you can modify the CSS variable names in `parent-element.js`: - Keep `--surface: dim` in `:host([surface='dim'])` rule (working case) - Change `--surface: dim` to `--surface_: dim` in the `.container` rules to disable them - Or vice versa: change `:host` rule to `--surface_: dim` and container rules to `--surface: dim` 4. Observe the behavior: - When using `:host([surface='dim']) { --surface: dim; }`: All child elements change style correctly - When using `.container` rules with `--surface: dim`: Only Shadow DOM children work, slotted content fails in Safari Expected Behavior All child elements should respond to the style container query regardless of: - Whether they are in Shadow DOM or slotted content - Whether the CSS custom property is set directly on `:host` or on an intermediate container This behavior works correctly in Chrome but fails in Safari when using intermediate container nodes. Technical Details The issue appears to be related to how Safari handles CSS custom property inheritance through slot boundaries when the property is defined on intermediate DOM nodes (like `.container`) rather than directly on the component host (`:host`). When the CSS custom property is set on an intermediate container, Safari fails to properly propagate the property to slotted elements for use in style container queries. Workaround For Safari compatibility, define CSS custom properties directly on the `:host` selector rather than on intermediate containers: ```css /* Use this instead of setting on .container */ :host([surface='dim']) { --surface: dim; } ``` Files index.html - Demo page with toggle functionality parent-element.js - Parent Web Component with both working and broken CSS rules child-element.js - Child Web Component with style container query README.md - This documentation Running the Demo Online Demo Open the StackBlitz demo in both Safari and Chrome to compare the behavior.