Shadow DOM 中的内容可编辑？答案

【问题标题】：ContentEditable in Shadow DOM?Shadow DOM 中的内容可编辑？
【发布时间】：2014-07-15 22:39:55
【问题描述】：

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

我创建了一个contenteditable div，将this.innerHTML 放在那里，它就可以编辑了。使用 polyfills 都很好，例如在火狐中。但它不适用于带有原生 Shadow DOM 的 Chrome 35。

嗯，它仍然是可编辑的，但 document.execCommand 和 window.getSelection 都不起作用。

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

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

【问题讨论】：

这看起来很有趣，如果您发布它，请发布一个指向您的代码的链接。
@PeterBurns 我在使用 Chrome 35 时遇到了另一个问题—— Range 对象不正确，所以我无法说明所选范围应用了哪些样式，或者将工具栏放置在选择边界附近。它看起来像一个 Chrome 错误，也许没有人尝试过我正在做的事情。如果您想查看 WIP 代码，我可以为您发布。否则我最好稍等片刻以获得更好的 Shadow DOM 稳定性。（是的，使用 polyfill 一切都很好，但它没有任何价值。）

【解决方案1】：

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

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

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

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

【讨论】：

谢谢！我现在正在努力。正在寻找一种方法来设置选择的样式:) 类似 execCommand 的东西——用标签或锚点包装/展开选择。
getSelection() 适用于 shadowRoot，但 getRangeAt(0) 是一个空范围，.surroundContents(document.createElement("strong")); 什么都不做，document.execCommand 不起作用:( 所以选择只是没用
它看起来可能会被黑客入侵。再次感谢！
@DmitryKurinskiy：你是怎么破解它的？
@RobertKoritnik，大约一年前我已经停止了这些实验:(

【解决方案2】：

你可以用这个：

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

【讨论】：