Bug 289868

Summary: Style Container Query on :host CSS Pseudo-Class Not Applied to Slotted Elements
Product: WebKit Reporter: oscar7600
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Critical CC: afrehner.work, koivisto, steveorvell, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: macOS 15   
See Also: https://bugs.webkit.org/show_bug.cgi?id=271040
https://bugs.webkit.org/show_bug.cgi?id=295838
Attachments:
Description Flags
developer tools none

oscar7600
Reported 2025-03-16 03:18:48 PDT
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
Attachments
developer tools (2.52 MB, image/png)
2025-03-16 03:18 PDT, oscar7600 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
oscar7600
Comment 1 2025-03-16 03:24:03 PDT
Perhaps it may have similarity with the following issue: https://bugs.webkit.org/show_bug.cgi?id=271040
Radar WebKit Bug Importer
Comment 2 2025-03-23 03:19:14 PDT
<rdar://problem/147684247>
Steve Orvell
Comment 3 2025-03-26 10:13:20 PDT
This minimal version appears to crash Safari so this may be a serious bug: https://stackblitz.com/edit/vitejs-vite-m6hulgtb?file=index.html
oscar7600
Comment 4 2025-03-27 04:32:08 PDT
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
Comment 5 2025-04-10 07:11:40 PDT
The crash noted here: https://bugs.webkit.org/show_bug.cgi?id=289868#c3 appears to be fixed in Safari TP 216.
Anthony Frehner
Comment 6 2025-04-13 11:49:51 PDT
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
Comment 7 2025-06-11 03:23:36 PDT
Committed 296080@main (a20439aa1afd): <https://commits.webkit.org/296080@main> Reviewed commits have been landed. Closing PR #45607 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.