Giters

github / relative-time-element

Web component extensions to the standard <time> element.

Home Page:https://github.github.io/relative-time-element/examples/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Text selection bugs in Firefox

silverwind opened this issue · comments

commented

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

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.

commented

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

image

It's fine in Safari:

image

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.

commented

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

commented

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

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?