Closed. This question is opinion-based。它当前不接受答案。
想要改善这个问题吗？更新问题，以便editing this post用事实和引用来回答。
已关闭6年。
Improve this question
研究有关ShadowDOM的文章，似乎是对DocumentFragments的增强。 ShadowDOM的真正好处是什么？ CSS的特殊性？我不能对Fragments做大致相同的事情吗？
我正在寻找每种功能的列表。例如，两者似乎都允许您在内存中和主渲染路径之外组装dom树。但是，ShadowDOM似乎具有作用域CSS的额外好处。
在什么情况下，您将使用ShadowDOM与仅想使用DocumentFragments？
更新
在自己深入研究之后，我发现这两种技术是完全正交的。
注意:由于问题已经结束，因此我无法自己回答。我最初将我的发现的细节放在下面的评论中，但想知道会有更多人在这里检查文本。
文档片段是一种Javascript/DOM构造工具，用于在DOM之外创建非分层的节点集合(每个节点可以是其他节点的父节点)。它们本质上是围绕节点集合的包装器，一旦将片段附加到DOM，它就会被废弃。 DocumentFragments允许您收集相同级别的多个节点，并将它们作为同级附加到另一个DOM节点。
Shadow Dom 涉及隔离较大的渲染DOM中的副作用。 ShadowDom允许您创建具有封装样式的沙盒可重用组件。将基于ShadowDom的组件添加到较大的Web应用程序时，其CSS样式不会泄漏到应用程序的其余部分，应用程序自身的样式也不会影响组件的呈现。
请注意，存在诸如
想要改善这个问题吗？更新问题，以便editing this post用事实和引用来回答。
已关闭6年。
Improve this question
研究有关ShadowDOM的文章，似乎是对DocumentFragments的增强。 ShadowDOM的真正好处是什么？ CSS的特殊性？我不能对Fragments做大致相同的事情吗？
我正在寻找每种功能的列表。例如，两者似乎都允许您在内存中和主渲染路径之外组装dom树。但是，ShadowDOM似乎具有作用域CSS的额外好处。
在什么情况下，您将使用ShadowDOM与仅想使用DocumentFragments？
更新
在自己深入研究之后，我发现这两种技术是完全正交的。
注意:由于问题已经结束，因此我无法自己回答。我最初将我的发现的细节放在下面的评论中，但想知道会有更多人在这里检查文本。
文档片段是一种Javascript/DOM构造工具，用于在DOM之外创建非分层的节点集合(每个节点可以是其他节点的父节点)。它们本质上是围绕节点集合的包装器，一旦将片段附加到DOM，它就会被废弃。 DocumentFragments允许您收集相同级别的多个节点，并将它们作为同级附加到另一个DOM节点。
Shadow Dom 涉及隔离较大的渲染DOM中的副作用。 ShadowDom允许您创建具有封装样式的沙盒可重用组件。将基于ShadowDom的组件添加到较大的Web应用程序时，其CSS样式不会泄漏到应用程序的其余部分，应用程序自身的样式也不会影响组件的呈现。
请注意，存在诸如
/deep/和::shadow之类的CSS组合器，用于对父dom的shadowDom组件进行样式设置(和选择)，但是在不久的将来将不推荐使用这些组合器。因此，建议使用ShadowDOM的可重用组件依赖CSS变量进行样式设置(如果打算由使用它们的应用程序对其进行自定义)。 最佳答案
从我的阅读及其使用方式来看， ShadowDom 与封装有关，就像您将<style>标签放入 ShadowDom 一样，css仅应用于 ShadowDom ojit与浏览器重排有关
10-08 03:29