Text selection bugs in Firefox

[silverwind]

See this example where I drag a selection 3 times from left (outside the element) and 1 time from right (inside the element) in Firefox 114:

Two specific issues:

• Text selection breaks when selection expands across the element boundary
• Selection color of CSS ::selection does not take effect, instead the default (in my case red) color is shown when selecting inside the element.

[keithamus]

This looks to be a bug with Firefox and ShadowDOM. I have a minimal reproduction here: https://codepen.io/keithamus/pen/abRewMJ. Testing in Chrome and Safari these issue is not reproducible. Firefox Nightly seems to still have this issue.

Specifically I'd look at https://bugzilla.mozilla.org/show_bug.cgi?id=1233594 or perhaps it's worth filing a new issue with Mozilla?

I'm going to close this because it's not something we can easily fix within this component, as it's a broken behaviour with one browser in particular. Let me know if you do file any bugs with Mozilla as I'd be interested to see the progress there.

[silverwind]

Okay, yes the first issue seems like a browser bug. The second issue with ::selection color affects Blink as well:

It's fine in Safari:

What do you think about that one? I guess those two Shadow DOM implementations may differ, but I'm not sure which one is supposed to be correct because I do recall Shadow roots represent a boundary that CSS normally can not cross.

[silverwind]

For the first issue, I found this meta bug, so it looks like Mozilla is well aware.

[silverwind]

As for the color issue: I conclude it as a Safari bug and Blink and Gecko are likely correct in that they don't let ::selection style cross the shadow boundary.

Overall, I think ::selection should be an exception that can cross shadow boundaries, as otherwise elements like this one would have to expose an API to let users define CSS, like a style attribute which could then be used to append a <style> node to the shadow root on creation, e.g.

<relative-time style="::selection {background: hotpink}">

[keithamus]

I’m inclined to agree that selection should cross shadow roots. I don’t think there’s any mechanism we’d want to introduce in this component, though. It won’t be exclusive to this component and providing a solution to each and every web component seems heavy handed IMO.

I’m surprised this hasn’t come up before. Have you found any issues in Chrome/Safari trackers around these?

[silverwind]

While the selection styling bug is still unfixed in Firefox, I found a way to make it work: #341.

[keithamus]

I just filed https://bugzilla.mozilla.org/show_bug.cgi?id=2016387 for the styling issue.