7

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

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

非常感谢！

4

3 回答 3

2

目前正在开发一项提案，以扩展 Selection API 以正确处理 Shadow DOM。见https://twitter.com/bocoup/status/1459120675390689284?s=20

于 2021-11-12T13:22:24.470 回答
2

几天来，我试图在影子世界中获得一个选择。到目前为止，我的理解是“this.shadowRoot.getSelection()”工作正常（在 Chrome 和 Firefox 中测试），但仅适用于“打开”模式下的 shadowdom，因为“this.shadowRoot”无法在“关闭”中访问"-mode: "无法读取 null 的属性 'getSelection'"。

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

于 2020-06-13T12:53:46.503 回答
1

据我所知，这是 2021 年 12 月的现状：

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

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

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

在 SafariShadowRoot.getSelection上不受支持，并且显然document.getSelection不会刺穿 Shadow DOM，这意味着您只是不走运。

有一个标准提案可以解决所有问题Selection.getComposedRange，但尚未在任何地方实施。根据讨论，他们将在 2022 年初至年中进行规范 PR。

于 2021-12-29T18:05:46.227 回答