Bug 163921 – Add selection API that works across shadow boundaries

• Component: DOM
• Status: RESOLVED FIXED

[Trey Shugart]

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?

[Javan Makhmali]

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.

[Javan Makhmali]

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.

[Javan Makhmali]

Created attachment 368675 [details]
Test case used to generate the attached screenshots

[Ryosuke Niwa]

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

[Javan Makhmali]

> 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?).

[Ryosuke Niwa]

(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

[Javan Makhmali]

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.

[Justin Fagnani]

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.

[Chris Yeager]

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.

[Radar WebKit Bug Importer]

<rdar://problem/89481826>

[Ryosuke Niwa]

Pull request: https://github.com/WebKit/WebKit/pull/10843

[EWS]

Committed 261021@main (0fa3bd8548e3): <https://commits.webkit.org/261021@main>

Reviewed commits have been landed. Closing PR #10843 and removing active labels.

The new composed range API does not seem to be working with safari 17.1  see https://bugs.webkit.org/show_bug.cgi?id=265632#c0