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

Question

最近我看到了以下html DOM：

[请参阅控制台输出，该输出查询元素display-1，并告诉我它的parentNode是文档片段。怎么会这样我浏览了几篇文章，每个人都说在将文档片段附加到DOM元素后，文档片段仍保留为空节点，并且其子级通常附加到DOM中。

我试图通过使用影子dom，自定义元素等来创建这种情况。但是没有任何东西可以使我确切地了解这种行为。

我在chrome和edge中尝试过。

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

Answer 1

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

具有更多信息的文档：

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_domhttps://lwc.dev/guide/composition#shadow-domhttps://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 Developer Tools中的DOM元素。屏幕快照显示了＃shadow-root文档片段，它是组件阴影树的顶部节点。如果您查看Chrome Developer中的Lightning Web组件，工具，您看不到＃shadow-root，因为LWC使用了Shadow DOM polyfill。Salesforce支持某些未实现Shadow DOM Web标准的浏览器。polyfill在这些浏览器中提供了Shadow DOM。在页面上，查找包含连字符的元素名称。选择该元素并在控制台中运行$0.shadowRoot。LightningWeb组件返回＃document-fragment。“

因此，Salesforce说您需要在其LWC中选择一个元素的方法是，首先选择整个组件，然后链接.shadowRoot（返回文档片段），然后在其中选择元素。我已经在使用LWC建立的站点中做到了这一点：document.querySelector（'c-lb-header.cLB_Theme'）。shadowRoot.querySelector（'＃search-1'）

我认为在遍历DOM时还可以通过其他方式遇到这些文档碎片，例如，示例中的.parentNode显然是一种。但是，甚至其他方式...我不记得我现在在哪里读到另一本。我认为这是可能出现问题的地方。而且我确信其他网页可能会以这种方式使用文档碎片。我只知道LWC。

我对本文档的大部分内容不满意的是，这里确实有两个概念在起作用。一个是本机浏览器的影子DOM，另一个是用于封装的影子DOM的更一般的概念（SF通过其polyfill和document-fragment实现了什么，而没有实现）。但是我认为SF在区分这些方面做得不好，因此可能会更加令人困惑。

更有经验的人也可以阅读所有这些文档，并为您的问题提供更具体，准确的答案。我仍然不太了解LWC的文档片段是如何附加到DOM的，但是仍然表现为无法访问。它也可能与SF的“更衣室服务”有关，但我真的还不知道。https://developer.salesforce.com/docs/component-library/tools/locker-service-viewer