shadowRoot.getSelection()?

Question

我有一个丰富的编辑器，我正在重写为一个 lit-element 自定义元素。我正在使用 Firefox（最新）进行测试。我正在尝试在自定义元素的 shadowDom 中（在方法中）获取内容可编辑元素的选择。

在 Firefox 调试器中），this.shadowRootshadowRoot 元素看起来是正确的，但this.shadowRoot.getSelection没有定义，即使DocumentOrShadowRoot 说shadowRoot.getSelection()是在 shadow DOM 中获取选择的正确方法。任何人都可以阐明我缺少的东西吗？

非常感谢！

Answer 1

截至 2023 年 12 月的状况：

ShadowRoot.getSelection 是一个非标准的API。

Selection.getComposedRanges是支持 Shadow DOM 选择的标准提案。

在 Chromium 上，调用document.getSelection不会刺入 Shadow DOM，并为您提供一些无用的高级元素。getSelection但它确实暴露了ShadowRoot 上的非标准方法。

在 Firefox 上，它不会实现ShadowRoot.getSelection，但document.getSelection会穿透 Shadow dom 并为您提供确切的元素。

在 Safari 上，Selection.getComposedRanges从 v17 开始支持。在此之前的版本中，ShadowRoot.getSelection不支持并且显然document.getSelection不会穿透Shadow DOM，这意味着您只是运气不好。

Answer 2

我自己尝试了好几天在影子世界中进行选择。到目前为止我的理解是“this.shadowRoot.getSelection()”工作正常（在 Chrome 和 Firefox 中测试），但仅适用于“打开”模式下的 Shadowdom，因为“this.shadowRoot”无法在“关闭”模式下访问“-mode：“无法读取 null 的属性“getSelection””。

当然，您可以在初始化时自己存储对 ShadowRoot 的引用，但是很难在 JavaScript 中保持此引用的私有性。