Bug 249706 – The :checked pseudoselector for slotted content fails to repaint

• Status: NEW
• Component: CSS

[Istvan Tutto]

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 {}
```

[Radar WebKit Bug Importer]

<rdar://problem/103740708>

[Ryosuke Niwa]

Created attachment 464251 [details]
Reduction

[Ryosuke Niwa]

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...

[zalan]

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>

[Ryosuke Niwa]

I think something in the paint invalidation logic is failing to take slotted content into account.

[zalan]

The render tree does not seem to get notified about the style change :|

[Istvan Tutto]

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.

Hi, I am also experiencing this issue with the same prerequisites: custom styles, shadow root.
I try to change the checkbox state by calling `.click()` on it, and the state changes, but the UI is not refreshed. The same happens if I use `.checked` property programmatically: state changes, but the visual appearance does not.

(In reply to vzemtsov from comment #8)
> Hi, I am also experiencing this issue with the same prerequisites: custom
> styles, shadow root.
> I try to change the checkbox state by calling `.click()` on it, and the
> state changes, but the UI is not refreshed. The same happens if I use
> `.checked` property programmatically: state changes, but the visual
> appearance does not.

I can confirm the exact behaviour, as described. Would be nice to get this fixed at some point.

[Elwin van Eede]

I'm also running into this issues with slotted radio buttons (`<input type="radio">`), see this minimal reproduction: https://codepen.io/elwinvaneede/pen/QwWWYLM.