A shadow host with delegatesFocus set to true will delegate its focus to its first focusable child. On a mouse click event, the child will receive focus and the event will be marked as handled. No further event dispatching is done. This is a problem because the steps to handle text selection afterward are not ran and the selection does not recognize the focused element as part of the selection. We fix this by continuing event handling even after an element was delegate focused and update how selection recognizes having focus in a shadow tree.
The Chromium issue was opened in 2019 and has 23 stars. Many web developers have mentioned this bug being a pain point to use Shadow DOM. For example, [1] and [2]. delegatesFocus is a mature attribute on Shadow DOM. The spec does not expect focusing an element would make text not selectable. This bug only happens on Blink [3]. [1] https://stackoverflow.com/q/60260078/864715 [2] https://stackoverflow.com/q/62766250/864715 [3] https://github.com/web-platform-tests/wpt/pull/43244#issuecomment-1831608707
Samples: http://lopsided-motion.glitch.me/text-select-bug.html https://codepen.io/JRJurman/pen/gOqvxXz