javascript - 创建保留在 DOM 中的文档片段

Question

最近我看到了以下 html DOM:

请查看查询元素 display-1 的控制台输出，并告诉我它的parentNode 是一个文档片段。 怎么会发生这种事呢？我读了几篇文章，每个人都说将文档片段附加到 DOM 元素后，文档片段仍为空节点，并且它的子节点通常附加到 DOM 中。

我尝试通过使用shadow dom、自定义元素等来创建这种情况。但没有什么能让我做出这种行为。

我在 Chrome 和 Edge 中尝试过。

希望大家能给我一点提示。从昨天开始我就一直在解决这个问题......

Answer 1

我并不声称自己是这方面的专家，但我认为至少部分解释是这样的:lightning web 组件使用 polyfill 来实现类似于封闭 Shadow DOM 的结构(但不是实际上不是 native 浏览器 Shadow DOM)。他们也在实现中使用文档片段。

包含更多信息的文档:

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_dom https://lwc.dev/guide/composition#shadow-dom https://salesforce.stackexchange.com/questions/243725/understanding-shadow-dom-in-lightning-web-components

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.testing_dom_api

在上一篇文章中，我认为这句话更直接地说明了文档片段是 LWC 的一部分。

“本文有一个屏幕截图，显示了 Chrome 开发人员工具中的 DOM 元素。该屏幕截图显示了 #shadow-root 文档片段，它是组件影子树的顶部节点。如果您在 Chrome 中查看 Lightning Web 组件开发人员工具，您看不到 #shadow-root，因为 LWC 使用 Shadow DOM polyfill。Salesforce 支持一些不实现 Shadow DOM Web 标准的浏览器。polyfill 在这些浏览器中提供了 Shadow DOM。要查找 Lightning Web页面上的组件，查找包含连字符的元素名称。选择该元素并在控制台中运行 $0.shadowRoot。Lightning Web 组件返回 #document-fragment。”

因此，salesforce 表示，要在其 LWC 之一中选择元素，您需要做的是首先选择整个组件，然后链接 .shadowRoot(返回文档片段)，然后选择其中的元素。我在使用 LWC 构建的网站中完成了此操作，如下所示: document.querySelector('c-lb-header.cLB_Theme').shadowRoot.querySelector('#search-1')

我认为在遍历 DOM 时还有其他方法可以遇到这些文档片段，例如示例中的 .parentNode 就是其中之一。但即使是其他方式......我现在不记得我在哪里读到过另一个。我想这就是可能出现问题的地方。我确信其他网页可能会以可能发生这种情况的方式使用文档片段。我只知道 LWC。

对于本文档的大部分内容，我不喜欢的一件事是，这里实际上有两个概念在起作用。一个是原生浏览器影子 DOM，另一个是用于封装的影子 DOM 的更一般概念(SF 通过其 polyfill 和文档片段实现了什么)。但我不认为 SF 在区分这些方面做得很好，所以它可能会更加令人困惑。

更有经验的人也可能可以吸收所有这些文档，并对您的问题提出更具体和准确的答案。我仍然不太明白 LWC 文档片段是如何附加到 DOM 的，但仍然表现得好像它们不可访问。可能也和顺丰的“储物柜服务”有关，不过我还真不知道。 https://developer.salesforce.com/docs/component-library/tools/locker-service-viewer