Strange key behaviour inside shadow dom

[glromeo]

The left key is not working, plus the enter inserts a section before rather than splitting the current.

It looks like my problem is that my [data-editable] is inside a #shadow-root

I the selection being always empty { 0, 0 } ...

[glromeo]

example.html.zip

I put together an example... hoping this helps

[anthonyjb]

Hi @glromeo - I think this is probably an issue with ContentSelect and specifically the use of window.getSelection().getRangeAt(0) (see here https://github.com/GetmeUK/ContentSelect/blob/master/src/content-select.coffee#L98).

There's a discussion here: https://bugs.chromium.org/p/chromium/issues/detail?id=380690 on why this method wont behave as you might expect it to in a shadow DOM, and this specification from the W3C stating http://w3c.github.io/webcomponents/spec/shadow/#h-ranges-and-selections:

Accordingly, selections may only exist within one node tree, because they are defined by a single range. The selection, returned by the window.getSelection() method never returns a selection within a shadow tree.

There's actually a similar issue if you try to edit content in an iframe when the editor is initialized in the main frame.

So what's the solution? Well short term you could patch ContentSelect to allow the window object to be overridden and therefore allow you to set the shadow DOM root as the window object, or perhaps the easiest approach that might work is to load and initialize the editor within your shadow DOM as I believe in that case the window object will be set to shadow DOM for that code - but I haven't tried this so it's just a hunch.

Longer term I think I'll add an enhancement / feature request for this issue to ContentSelect to see if there's a way we can automatically search other iframes and or shadow DOMs for selection within the document quickly.