Bug 295838 – Style Container Queries don’t work correctly when CSS custom properties are inherited through intermediate DOM nodes in slotted content inside Web Components

• Component: CSS
• Status: NEW

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.

[Ahmad Saleem]

@Oscar - you tested this with Safari 18.5 or earlier version?

Hi @ahmad, with Safari Technology Preview - Release 223 (WebKit 20622.1.18.11.5)

[Radar WebKit Bug Importer]

<rdar://problem/156228414>

Created attachment 476441 [details]
Screencapture of additional manifestation of bug: https://jsfiddle.net/Lygmx8p5/2/

Here's what looks like another manifestation of this bug.  Here, we get very weird results (it will often render properly then break when hovering the elements in question even though no `:hover` pseudoclass is used).  

JSFIddle: https://jsfiddle.net/Lygmx8p5/2/

Basically this shows the bug also manifesting when setting the custom property on the `:host`, then using a container style query on the child custom element to enable another `:host` rule.  This seems to often work for a few nested custom elements but consistently fails for me with: 

```html
<custom-element>
  <custom-element>
    <custom-element>
      <custom-element>
        <custom-element>
          <custom-element>
            <custom-element>
              <custom-element>
                <custom-element>
                  <custom-element>
                  </custom-element>
                </custom-element>
              </custom-element>
            </custom-element>
          </custom-element>
        </custom-element>
      </custom-element>
    </custom-element>
  </custom-element>
</custom-element>
```

```javascript
const styleSheet = new CSSStyleSheet;
styleSheet.replaceSync(`
  :host {
    display: block;
  }
  
  :host {
    --custom-property: value;
    border: 1px solid red;
    margin: 2%;
    width: 96%;
    height: 96%;
  }

  @container style(--custom-property: value) {
    :host {
      border-color: green;
    }
  }
`);


class CustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const slot = document.createElement('slot');
  
    this.shadowRoot.appendChild(slot);
    this.shadowRoot.adoptedStyleSheets.push(styleSheet);
  }
}
customElements.define('custom-element', CustomElement);
```

Tested on Safari Version 18.6 (20621.3.11.11.3)

As you can see in this screen-capture, the inner custom elements often have a red border (when all but the outer should be green) and while they often render correctly at first, there are weird hover effects that cause things to break (even though no hover state is used in styling).  Chrome behaves correctly and all but the outer element has the green border.

^ sorry if it's unclear, but you can click the attachment link to see the screen capture with the weird results (in case this doesn't happen on your machine): https://bugs.webkit.org/attachment.cgi?id=476441

This issue was resolved by the following commit:
https://github.com/WebKit/WebKit/commit/efd4ebe98cab2bbb385ffe1e1e40d3870917727b

and this works correctly in Safari 16.2.

However, the bug mentioned by [e-mail]
still persists. It may be resolved once the following issue is closed:
https://bugs.webkit.org/show_bug.cgi?id=304555