shadowRoot.getSelection()？

Posted 2023-02-21

【中文标题】shadowRoot.getSelection()？

【英文标题】：shadowRoot.getSelection()?

【发布时间】：2020-09-15 04:28:07

【问题描述】：

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

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

非常感谢！

【问题讨论】：

回答我自己的问题：看起来像在 shadowRoot 中工作，应该在 Chrome 上使用 shadowRoot.getSelection()，在其他浏览器上使用 document.getSelection()。

document.getSelection() 是否在 Safari 和 FF 上的影子根中返回节点？

贾斯汀，“document.getSelection()”适用于 FF；我没有在 Safari 上尝试过，但我想有人告诉过我这样做了。

@JustinFagnani 它确实在 FF 中工作，但它在 Safari 中仅显示 shadow dom 的容器。

【参考方案1】：

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

当然你可以在初始化时自己存储对shadowRoot的引用， 但是很难在 javascript 中将此引用保密。

【讨论】：

当我在 Firefox 中测试时，this.shadowRoot.getSelection 是未定义的。文档页面将其列为“非标准”：developer.mozilla.org/en-US/docs/Web/API/ShadowRoot

【参考方案2】：

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

【参考方案3】：

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

ShadowRoot.getSelectionis a non-standard API.

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

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

在 Safari 上 ShadowRoot.getSelection 不受支持，显然 document.getSelection 确实不刺穿 Shadow DOM，这意味着你只是不走运。

有一个standards proposal 可以用Selection.getComposedRange 修复所有问题，但它还没有在任何地方实现。根据the discussion 的说法，他们将在 2022 年初至年中进行规范 PR。