Text selection bugs in Firefox about relative-time-element HOT 5 CLOSED

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.

from relative-time-element.

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.

from relative-time-element.

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

from relative-time-element.

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}">

from relative-time-element.

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?

from relative-time-element.