10

I have a rich editor I'm re-writing as a lit-element custom element. I'm using Firefox (latest) for testing. I'm trying to get the selection for the content editable element in the custom element's shadowDom (in a method).

In the Firefox debugger), this.shadowRoot looks correct for the shadowRoot element, but this.shadowRoot.getSelection is not defined, even though DocumentOrShadowRoot says shadowRoot.getSelection() is the proper way to get the selection within the shadow DOM. Can anybody shed light on something I'm missing?

Many thanks!

Justin Fagnani
  • 10,483
  • 2
  • 27
  • 37
SteveB
  • 851
  • 2
  • 7
  • 15
  • 1
    Answering my own question: it looks like for working inside the shadowRoot, one should use shadowRoot.getSelection() on Chrome, and document.getSelection() on other browsers. – SteveB May 28 '20 at 13:32
  • did document.getSelection() return nodes inside the shadow root on Safari & FF? – Justin Fagnani May 25 '21 at 16:16
  • Justin, "document.getSelection()" works on FF; I haven't tried it on Safari, but I think I was told it did. – SteveB May 26 '21 at 18:52
  • @JustinFagnani it does work in FF but it shows only container of shadow dom in Safari. – extempl Aug 11 '21 at 15:11

3 Answers3

8

As far as I can tell, this is the current state of affairs in Dec 2021:

ShadowRoot.getSelection is a non-standard API.

On Chromium, calling document.getSelection will not pierce into the Shadow DOM and gives you some unhelpful high-level element. But it does expose the non-standard getSelection method on the ShadowRoot.

On Firefox, it does not implement ShadowRoot.getSelection, but document.getSelection will pierce through shadow dom and give you the exact element.

On Safari ShadowRoot.getSelection is not supported and apparently document.getSelection does not pierce the Shadow DOM, meaning you are just out of luck.

There is a standards proposal to fix everything with Selection.getComposedRange, but it is not implemented anywhere yet. According to the discussion, they will work on a spec PR early to mid 2022.

RandomEngy
  • 14,931
  • 5
  • 70
  • 113
3

I tried to get a Selection within shadowdom myself for days. My understanding so far is that "this.shadowRoot.getSelection()" works fine (tested in Chrome and Firefox), but only for shadowdom in "open"-mode, because "this.shadowRoot" can't be accessed in "closed"-mode: "Cannot read property 'getSelection' of null".

Of course you can store a reference to shadowRoot yourself at initialization time, however it is hard to keep this reference private in JavaScript.

B42ribi
  • 31
  • 2
  • 2
    When I tested in Firefox, `this.shadowRoot.getSelection` was undefined. The docs page has it listed as "non-standard": https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot – RandomEngy Dec 29 '21 at 17:26
2

There's a proposal currently in development to extend the Selection API to properly handle Shadow DOM. See https://twitter.com/bocoup/status/1459120675390689284?s=20

zcorpan
  • 1,243
  • 6
  • 11