Bug 163921

Summary: Add selection API that works across shadow boundaries
Product: WebKit Reporter: Trey Shugart <treshugart>
Component: DOMAssignee: Ryosuke Niwa <rniwa>
Status: RESOLVED FIXED    
Severity: Blocker CC: asci, bede.overend, cdumez, cymptom, javan, jeroen.zwartepoorte, justin, rniwa, sghzal, simon.fraser, thatguy, vepomoc, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 10   
Hardware: Mac   
OS: macOS 10.12   
Bug Depends on: 251997    
Bug Blocks: 148695, 249528    
Attachments:
Description Flags
console tests
none
DOM and Shadow DOM selections in Safari, Chrome, and Firefox
none
Test case used to generate the attached screenshots none

Trey Shugart
Reported 2016-10-24 16:41:49 PDT
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!
Attachments
console tests (87.03 KB, image/png)
2016-10-24 16:41 PDT, Trey Shugart 		no flags
Details
DOM and Shadow DOM selections in Safari, Chrome, and Firefox (485.76 KB, image/png)
2019-05-01 09:04 PDT, Javan Makhmali 		no flags
Details
Test case used to generate the attached screenshots (2.04 KB, text/html)
2019-05-01 09:05 PDT, Javan Makhmali 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
asci
Comment 1 2018-07-03 06:26:17 PDT
Any updates on this?
Javan Makhmali
Comment 2 2019-05-01 09:00:38 PDT
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
Comment 3 2019-05-01 09:04:56 PDT
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
Comment 4 2019-05-01 09:05:36 PDT
Created attachment 368675 [details] Test case used to generate the attached screenshots
Ryosuke Niwa
Comment 5 2019-05-02 14:01:32 PDT
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
Comment 6 2019-05-02 17:03:11 PDT
> 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
Comment 7 2019-05-02 17:12:04 PDT
(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
Comment 8 2019-05-02 17:22:39 PDT
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
Comment 9 2021-05-25 09:33:20 PDT
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
Comment 10 2021-06-04 11:28:49 PDT
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
Comment 11 2022-02-25 10:40:47 PST
<rdar://problem/89481826>
Ryosuke Niwa
Comment 12 2023-02-28 19:13:25 PST
Pull request: https://github.com/WebKit/WebKit/pull/10843
EWS
Comment 13 2023-03-01 13:05:46 PST
Committed 261021@main (0fa3bd8548e3): <https://commits.webkit.org/261021@main> Reviewed commits have been landed. Closing PR #10843 and removing active labels.
sghzal
Comment 14 2023-11-30 23:56:22 PST
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
Note You need to log in before you can comment on or make changes to this bug.