ShadowDOM与文档碎片 - 它们有何不同？

Question

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

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

在什么情况下你会使用ShadowDOM vs你想要使用DocumentFragments的地方？

UPDATE

在仔细研究了这个之后,我看到这两种技术是完全正交的.

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

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

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

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

Answer 1

从我所阅读的内容和使用它的方式来看,ShadowDom与封装有关,就像你<style>在ShadowDom中放置一个标签一样,css只会应用于ShadowDom而文档片段与浏览器重排有关