javascript - Shadow DOM 中的内容可编辑？

Question

我正在尝试为 contenteditable 创建一个 Polymer 元素。

我创建了一个contenteditablediv，放在this.innerHTML那里，它就变成了可编辑的。使用 polyfill 都很好，例如在 Firefox 中。但它不适用于带有原生 Shadow DOM 的 Chrome 35。

好吧，它仍然是可编辑的，但既不工作document.execCommand也不window.getSelection工作。

• document.execCommand什么也没做。
• window.getSelection().getRangeAt(0).toString()已定义但为空。
• 没有显示错误。

所以我无法为选择设置样式。

有人知道是否可以制作自定义可编辑元素吗？我究竟做错了什么？也许在现代/未来的网络中还有另一种使用 contenteditable 的方法？

Answer 1

根据规范1 ，选择对实施者来说有点开放。它确实提到：

因此，选择可能只存在于一个节点树中，因为它们是由单个范围定义的。该window.getSelection()方法返回的选择永远不会返回影子树中的选择。

阴影根对象的getSelection()方法返回此阴影树中的当前选择。

你试过影子根的getSelection()吗？

Answer 2

你可以使用这个：

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