Shadow DOM vs Document Fragments - 它们有何不同？

Question

查看有关ShadowDOM的文章，似乎是对DocumentFragments的增强。 ShadowDOM的真正好处是什么？ CSS特异性？我不能用Fragments做大致相同的事情吗？

我正在寻找每种功能的列表。例如，两者似乎都允许您在内存中组装d​​om树并离开主渲染路径。但是，ShadowDOM似乎具有作用域CSS的额外好处。

在什么情况下你会使用ShadowDOM vs你只想使用DocumentFragments？

更新

在我自己研究之后，我发现这两种技术是完全正交的。

注意：由于问题已经结束，我自己无法回答。我最初将我的调查结果的详细信息放在下面的评论中，但想到更多人会在这里检查文本。

文档片段是一个Javascript / DOM构建工具，用于在DOM之外创建非heyrrchical节点集合（每个节点可以是其他节点的父节点）。它们本质上是节点集合的包装器，一旦片段附加到DOM就会被放弃。 DocumentFragments允许您在同一级别收集多个节点，并将它们作为兄弟节点附加到另一个DOM节点。

Shadow Dom 就是在更大的渲染DOM中隔离副作用。 ShadowDom允许您使用封装样式创建沙盒可重用组件。当基于ShadowDom的组件添加到更大的Web应用程序时，其CSS样式不会泄漏到应用程序的其余部分，应用程序自己的样式也不会影响组件的呈现。

请注意，{doneDom}组件（例如/deep/和::shadow）存在用于从父dom样式化（和选择）shadowDom组件，但这些组件在不久的将来会被弃用。因此，建议使用ShadowDOM的可重用组件依赖CSS变量进行样式设置，如果它们打算由使用它们的应用程序自定义。

Answer 1

从我读过的内容和使用它的方式来看， ShadowDom 与封装有关，就像你在其中放置一个<style>标签一样 ShadowDom css仅适用于 ShadowDom ，文档片段与浏览器重排

有关