Bug 289868 – Style Container Query on :host CSS Pseudo-Class Not Applied to Slotted Elements

• Component: CSS
• Status: RESOLVED FIXED

Created attachment 474580 [details]
developer tools

When using a style container query on the `:host` CSS pseudo-class, the styles do not get applied to elements in slots. 
This issue is observed in WebKit but works correctly in Chrome.

Reproduction :
https://lit.dev/playground/#gist=52e97d65f0fe1c7d87a5eba2b249ea39

Perhaps it may have similarity with the following issue:

https://bugs.webkit.org/show_bug.cgi?id=271040

[Radar WebKit Bug Importer]

<rdar://problem/147684247>

[Steve Orvell]

This minimal version appears to crash Safari so this may be a serious bug:

https://stackblitz.com/edit/vitejs-vite-m6hulgtb?file=index.html

I’ve added a demo using Declarative Shadow DOM, eliminating any dependencies on external libraries, along with a more detailed explanation.

https://stackblitz.com/edit/stackblitz-starters-w5venpqm?file=index.html

[Steve Orvell]

The crash noted here: https://bugs.webkit.org/show_bug.cgi?id=289868#c3 appears to be fixed in Safari TP 216.

[Anthony Frehner]

Is this the same issue? If you click this button several times in Chrome, you'll see a blue border appear and disappear. Safari never shows the border.

https://codepen.io/afrehner/pen/GgRVaKY

It appears that the Container query never picks up on the CSS Custom Property that's defined in the Shadow DOM but queried against in the light DOM. 

I did also see that if you use JS to look at the inherited value of the Custom Property, it seems to be correct:

- Toggle button, value is cool
- `window.getComputedStyle($('.style-query')).getPropertyValue('--my-thing-setting') // cool`
- Toggle button, value is not cool
- `window.getComputedStyle($('.style-query')).getPropertyValue('--my-thing-setting') // not cool`

[EWS]

Committed 296080@main (a20439aa1afd): <https://commits.webkit.org/296080@main>

Reviewed commits have been landed. Closing PR #45607 and removing active labels.