Created attachment 292676 [details] console tests We're wrapping a web component around ProseMirror that has an editor inside of a shadow root. In order to get ProseMirror working with native Shadow DOM, we made a PR that uses getSelection() on the DocumentOrShadowRoot interface (which ShadowRoot should implement). However, we've run into issues in Safari 10 where this isn't working and upon investigation it seems Safari doesn't fully implement the Shadow DOM spec here. This is a critical issue for us. Is there somewhere we can easily find what Safari hasn't implemented yet so we don't keep running into these issues? Thanks!
Any updates on this?
Firefox also does not implement `getSelection()` on Shadow Root, but the document level API works (`document.getSelection().getRangeAt(0)` will return a Shadow Root's Range). Safari has no such fallback or workaround, making it impossible to programmatically work with DOM selections inside a Shadow Root.
Created attachment 368674 [details] DOM and Shadow DOM selections in Safari, Chrome, and Firefox In the bottom row, note that Safari is the only browser with no Shadow DOM selection.
Created attachment 368675 [details] Test case used to generate the attached screenshots
This is Chrome only API. The latest proposal is to add getComposedRange which takes a list of ShadowRoots and then return a StaticRange which spans across shadow boundaries: https://github.com/w3c/webcomponents/issues/79
> This is Chrome only API Isn't it part of the spec (https://w3c.github.io/webcomponents/spec/shadow/#ranges-and-selections)? Or do you mean that only Chrome has implemented it? > The latest proposal is to add getComposedRange Interesting, thanks. It's a new API, not a replacement for getSelection(), right? https://github.com/w3c/selection-api/issues/98 --- As it stands, I'd be happy with any API for getting the Selection/Range from a Shadow Root. It's possible to do in Chrome and Firefox currently, but not Safari (unless I'm missing something?).
(In reply to Javan Makhmali from comment #6) > > This is Chrome only API > > Isn't it part of the spec > (https://w3c.github.io/webcomponents/spec/shadow/#ranges-and-selections)? Or > do you mean that only Chrome has implemented it? That specification has been deprecated / superseded. See the warning at the very top which says: > Shadow DOM specification is being upstreamed to DOM Standard [WHATWG-DOM], HTML Standard [HTML], CSS Scoping Module Level 1 [css-scoping-1], UI Events specification [uievents], and other relevant specifications. This specification may not accurately reflect the latest conclusion. See Issue #377 for details. > > The latest proposal is to add getComposedRange > > Interesting, thanks. It's a new API, not a replacement for getSelection(), > right? https://github.com/w3c/selection-api/issues/98 window.getSelection() isn't going away anytime soon but no browser engine other than Blink has a plan or has demonstrated public support for having getSelection() on ShadowRoot. > As it stands, I'd be happy with any API for getting the Selection/Range from > a Shadow Root. It's possible to do in Chrome and Firefox currently, but not > Safari (unless I'm missing something?). I'm pretty sure it's not supported in Firefox. I tested 68.0a1 (2019-05-01) and 66.0.2 and both versions don't have it: document.createElement('div').attachShadow({mode: 'open'}).getSelection() TypeError: document.createElement(...).attachShadow(...).getSelection is not a function
Got it, thanks for the clarifications! > I'm pretty sure it's not supported in Firefox. That's correct, but window.getSelection() will return a Shadow Root's selection in Firefox. Probably goes against spec, but it works at least. See the Firefox note and linked issue in the README here: https://github.com/GoogleChromeLabs/shadow-selection-polyfill There's no such workaround in Safari.
I've had a number of people ask me about this recently. It's a big blocker to putting current rich text editors into components with shadow roots. The only workaround I can think of right now is to have the editor manage and paint its own selections.
As others have said, no selection API for shadow DOM makes rich text editor components (as well as others, I'm sure) a non-starter for Safari. I would love to see some movement on this.
<rdar://problem/89481826>
Pull request: https://github.com/WebKit/WebKit/pull/10843
Committed 261021@main (0fa3bd8548e3): <https://commits.webkit.org/261021@main> Reviewed commits have been landed. Closing PR #10843 and removing active labels.