Bug 288826
| Summary: | No style invalidation of :has with interactive pseudo classes in shadow DOM | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | thatemil <bjorklund.emil> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | bfulgham, karlcow, koivisto, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 18 | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | macOS 15 | ||
| URL: | https://codepen.io/emilbjorklund/pen/ByapzBO | ||
thatemil
When using pseudo-classes like :focus, :checked, :placeholder-shown inside of :has(), the new state will not render when applied inside of a shadow root.
This was mentioned in another similar (non-shadow DOM) bug (see comment here: https://bugs.webkit.org/show_bug.cgi?id=234556#c16) that was since fixed.
Steps to Reproduce:
1. Visit reduced test case here: https://codepen.io/emilbjorklund/pen/ByapzBO (forked from example in the bug listed above)
2. Interact with the form controls.
Actual Results:
The labels next to the form controls do not change their border.
Expected results:
Each example should get a differently colored border when input is checked/focused etc.
Additional Information:
Behavior noted on Version 18.3 (20620.2.4.11.5), MacOS
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/146479251>
thatemil
Updating the linked URL in the metadata, since it was incorrectly pointing to Lea Verou’s codepen from the linked bug, not the one I created for this one.