Javascript ShadowDOM和文档片段——它们有什么区别？

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

我正在寻找每个功能的列表。例如，两者似乎都允许您在内存中和主渲染路径之外组装dom树。然而，ShadowDOM似乎还具有作用域CSS的额外好处

在什么情况下，您会使用ShadowDOM，而不是只想使用DocumentFragments

更新

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

注意：由于问题已结束，我无法亲自回答。我最初把我的发现的细节放在下面的评论中，但我想更多的人会在这里查看文本

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

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

---

请注意，CSS组合符（如

/deep/

和

：：shadow

用于从父dom中设置（和选择）shadowDom组件的样式，但这些组合符在不久的将来将被弃用。因此，建议使用ShadowDOM的可重用组件依赖CSS变量进行样式设置，如果它们希望由使用它们的应用程序进行自定义。

根据我所阅读的内容和使用方式，isShadowDom与封装有关就像在ShadowDom中放置

标记一样，css将只应用于ShadowDom，文档片段与浏览器回流有关

不确定这是如何“主要基于意见”的。我没有征求任何意见，只是对能力和目的进行了客观的比较和对比。编辑应移至答案处。所以这个问题应该重新讨论。作为一个研究web组件的noob，我也有同样的问题，在这里学到了很多。这些类型的问题不应该关闭，但一旦回答就应该锁定，以防止回答垃圾。我还要补充一点，这两个问题的重点完全不同。文档片段是一种dom构造工具，用于创建dom节点的非继承体系结构集合（这些节点本身可能具有层次结构）。它们本质上是节点集合的包装器，一旦将片段附加到dom中，就会放弃节点集合。这允许您在同一级别收集多个节点，并将它们作为兄弟节点放入dom中。阴影Dom是关于在渲染Dom中隔离副作用的。