javascript - ShadowDOM 与文档片段——它们有何不同？

Question

关闭。这个问题是opinion-based .它目前不接受答案。












想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它.


7年前关闭。







Improve this question




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

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

在哪些情况下您会使用 ShadowDOM，而您只想使用 DocumentFragments？

更新

在我自己对此进行了更多研究之后，我发现这两种技术是完全正交的。

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

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

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

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

Answer 1

根据我的阅读和使用方式， ShadowDom 与 有关封装 就像你放一个 <style> 内的标签ShadowDom css 将仅应用于 ShadowDom 并且文档片段与浏览器重排有关