ContentEditable in Shadow DOM?

Question

I am trying to create a Polymer element for contenteditable.

I create a div contenteditable, place it this.innerHTMLthere, and it becomes editable. Everything is fine with polyfills, for example. in Firefox. But it does not work in Chrome 35 with the native Shadow DOM.

Well, it is still editable, but neither document.execCommand, nor window.getSelectionwork.

• document.execCommand doing nothing.
• window.getSelection().getRangeAt(0).toString() defined but empty.
• No error is displayed.

Therefore, I can not stylize the selection.

Does anyone know if you can create your own editable element or not? What am I doing wrong? Maybe there is another way to work with content resources in the current / future network?

Answer 1

According to specification 1, the choice for developers is too open. He mentions:

Accordingly, a selection can exist in only one node tree, since they are defined by a single range. The selection returned by the method window.getSelection()never returns the selection in the shadow tree.

The getSelection()shadow root object's method returns the current selection in this shadow tree.

Have you tried the root shadow getSelection()?

Answer 2

You can use this:

const selection = shadowRoot.getSelection();
const range = selection.getRangeAt(0)
console.log(range.toString())