在我的项目中实现Shadow DOM是否会使它们更快，就像React使用的虚拟DOM一样？
虚拟DOM
虚拟DOM的目的是避免对DOM进行不必要的更改，这在性能上是昂贵的，因为对DOM的更改通常会导致页面的重新呈现。虚拟DOM还允许收集要一次应用的多个更改，因此并非每个更改都会导致重新渲染，而是仅在将一组更改应用于DOM之后才进行一次重新渲染。
Shadow DOM
Shadow dom主要是关于实现的封装。单个定制元素可以实现与或多或少的复杂DOM相结合的或多或少的复杂逻辑。可以通过导入和<body><my-app></my-app>将具有任意复杂度的整个Web应用程序添加到页面上，但是可以将更简单的可重用和可组合组件实现为自定义元素，其中内部表示形式像<date-picker></date-picker>一样隐藏在阴影DOM中。
样式封装
Shadow DOM还可以防止将样式意外地应用于设计人员不需要的元素，例如，因为您使用的CSS或组件库更改了一个选择器，该选择器现在可应用于使用相同CSS类名的其他元素。添加到组件的样式的作用域仅限于该组件，可以防止样式渗出或渗入。Shadow DOM and performance
尽管影子DOM首先与性能无关，但它也对性能有影响。因为样式是作用域的，所以浏览器可以对某些更改做出假设，以仅影响页面的有限区域（自定义元素的阴影DOM），从而可以将重新呈现限制在此类组件的区域，而不是重新呈现整个页面。
这是>>>，/deep/和::shadow CSS组合器（允许跨阴影DOM边界应用样式的原因，已被弃用，并很快就会从Chrome中删除（其他浏览器从未使用过它们的原因）， ）。这些组合器的存在阻碍了上一段中提到的优化。
Angular2
利用了两个世界的优势。它使用单向数据流，并且仅在模型上运行更改检测。如果检测到更改，则会通过更新绑定来使DOM更新，并使*ngFor，*ngIf，...等结构性指令更新DOM。因此，仅在实际更改模型时才更新DOM。
Angular2使用阴影DOM（仅使用ViewEncapsulation.Native，当前不是默认值）来利用浏览器提供的样式封装功能，或者（当前默认）是通过重写添加到组件的样式来模拟样式封装，作为一种变通方法，直到本机影子DOM和CSS变量（用于动态全局样式更改）已广泛可用。
否，Shadow DOM和Virtual DOM无关，尽管名称相似：
根据此测试，Polymer吹响了React在Chrome中的性能：