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

问题描述

最近我看到了下面的 html DOM：

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

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

我在chrome和edge上试过了。

希望任何人都可以给我一个提示。从昨天开始我一直在努力解决这个问题......

标签： javascripthtmlgoogle-chromedomdocumentfragment

我并不声称自己是这方面的专家，但我认为至少部分解释是这样的：闪电网络组件使用 polyfill 来实现一个类似于封闭 Shadow DOM 的结构（但实际上并非如此）本机浏览器 Shadow DOM）。他们也在实现中使用文档片段。

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

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

“这篇文章有一个截图，显示了 Chrome 开发者工具中的 DOM 元素。截图显示了一个#shadow-root 文档片段，它是组件影子树的顶部节点。如果你在 Chrome 开发者工具中查看一个闪电网络组件，你看不到#shadow-root，因为 LWC 使用了 shadow DOM polyfill。Salesforce 支持一些没有实现 Shadow DOM web 标准的浏览器。polyfill 在这些浏览器中提供了 shadow DOM。要在页面，查找包含连字符的元素名称。选择元素并在控制台中运行 $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

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

问题描述

解决方案

推荐阅读