Missing DocumentOrShadowRoot interface implementation

[bedeoverend]

Doesn't appear implement the DocumentOrShadowRoot interface - or only activeElement property seems to be implemented. Particularly for dealing with selections and ranges this is needed. I'm trying to use Prosemirror inside a component but this causes it to break - any chance some, if not all this interface will get implemented?

[bedeoverend]

Worth noting it seems only Chrome has implemented this - WebKit has an open bug

[sorvell]

I think at least some subset of the range/selection api could be implemented. It will likely be significant code and therefore, I'd imagine making it opt-in. The focus currently is on getting the core functionality of the library production ready rather than adding more advanced features.

[dam0vm3nt]

Hi guys, meanwhile this get fixed, is there any realiable way of getting the caret position in a contenteditable inside a shadyRoot ? Can I use window.getSelection() ?

[olegomon]

@sorvell There is there any progress on implementing the full interface for the DocumentOrShadowRoot interface? I think the full support for it is required for any WYSIWYG editors which are based on the "contenteditable" elements.

Also note that there is an attempt to implement "shadowRoot.getSelection()" polyfill already. See shadow-selection-polyfill

[web-padawan]

I have recently done some investigation regarding getSelection API, sharing the results.

Short summary

Only Chrome supports getSelection() on the Shadow Root. Neither Firefox 63 beta, nor Safari have it enabled. In Firefox 63 global API still works, Safari 10+ needs a polyfill.

Long Story

Original issue is being discussed here: w3c/webcomponents#79 There is no final agreement around it yet, although we might hear some news in the end of October: https://github.com/w3c/webcomponents/issues/763#issuecomment-426514447

There is an unofficial polyfill by one guy from Google, which only covers part of functionality: https://github.com/GoogleChromeLabs/shadow-selection-polyfill

Especially, it is not designed to emulate the whole getSelection() API , but only implements getSelection().getRangeAt(0) which appears to be working nice, still it needs to be properly tested, preferably covered by automated tests (as much as possible).

This issue is affects lots of WYSIWYG editors relying on window.getSelection() (or document.getSelection() which is the same), when those are placed inside of the shadow root:

• Quill: quilljs/quill#2021
• Trix: basecamp/trix#403
• CKEditor: ckeditor/ckeditor5-engine#692
• Prosemirror: ProseMirror/prosemirror#476
• Squire: neilj/Squire#327

Below goes the result of testing window.getSelection() API in the browsers lacking it on shadow root:

Firefox 63 beta

https://bugzilla.mozilla.org/show_bug.cgi?id=1430308

• getSelection() not implemented on shadow root
• window.getSelection() returns nodes from shadow trees (leaking as if they were not in shadow)
• window.getSelection().addRange() applies the selection when passing range with start and end nodes from the inside of shadow tree
• window.getSelection().removeAllRanges() works

Summary: Firefox 63 beta could be using global API for now, but this might break in future

Safari 11

https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/dom/DocumentOrShadowRoot.idl#L30 https://bugs.webkit.org/show_bug.cgi?id=163921

• getSelection() is not implemented on shadow root
• window.getSelection() does not leak nodes from shadow trees (reporting node as body)
• window.getSelection().addRange() works when passing range with start and end nodes from shadow tree (so using global API seems to work here)
• window.getSelection().removeAllRanges() works

Expecting both Safari 10 and 12 versions to behave the same.

[samthor]

FYI I wrote a disgusting polyfill for .getSelection inside a Shadow Root here: https://github.com/GoogleChromeLabs/shadow-selection-polyfill

[web-padawan]

@azakus @sorvell this issue appears to be closed by accident, most likely in progress of migrating to monorepo. The actual issue is still valid, so please reopen.

Also, the opt-in implementation for this would be highly appreciated.

[web-padawan]

@bicknellr @aomarks as you currently work on the polyfills, do you mind reopening this?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[web-padawan]

Is there any chance to implement a proper polyfill based on the one created by @samthor?

[samthor]

It stopped working on the latest Safari; I wouldn't recommend trying to bring it back, sorry.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[web-padawan]

For anyone interested, we ended up with adding a new shadow selection shim to our Quill fork, see https://github.com/vaadin/quill/pull/2.

[luijar]

Hey guys, just stopping by to see if anyone knew what the status is for implementing Selection API consistently across browsers was, at least within a shadow root? Not even expecting to cross shadow boundaries yet, but at least within the same root. Any information would help, thanks!