Hey team! I've noticed that a checkbox element's :checked state styles will not be immediately applied when using a keyboard (SPACE) to select it and the styles are coming from within a ShadowDom's `::slotted(...)` selector. The styles will be applied after blur event only. The pointer interaction works as expected and all other major browsers handle the keyboard event as well. Demonstration in link: https://codepen.io/istutto/pen/eYjmywN Note, that the above mentioned case will be resolved in Safari as well if the following empty rule as added into the light-DOM. ```css input[type=checkbox]:checked {} ```
<rdar://problem/103740708>
Created attachment 464251 [details] Reduction
This seems to be a repaint bug. The attached test case uses Element::click() to mark the checkbox (instead of requiring keyboard input from user). The checkbox turns blue as expected once you hover over the associated label, deactivate the window, etc...
interestingly it works fine when no customElements are involved. <style> input[type=checkbox] { appearance: none; width: 50px; height: 50px; } input[type=checkbox]:checked { background-color: green; } </style> <script> onload = () => { checkbox.focus(); setTimeout(() => checkbox.click(), 0); } </script> <input type=checkbox id=checkbox>
I think something in the paint invalidation logic is failing to take slotted content into account.
The render tree does not seem to get notified about the style change :|
Hello, A kindly reminder that this bug has been reported around 18 months ago and the bug still exists in the latest versions as well.