angular - ViewEncapsulation ShadowDom 与模拟

Question

Angular 的 ViewEncapsulation.ShadowDom 与 ViewEncapsulation.Emulated 有什么区别？

我了解 ViewEncapsulation.None 的作用，但我无法找到 ViewEncapsulation Emulated 与 ShadowDom 的任何相关比较。

Answer 1

答案: ViewEncapsulation.Emulated 将在您网站的 head 部分添加 css 样式(并引用组件的唯一 id(_ngcontent) 来应用它)。ViewEncapsulation.ShadowDom 将在组件生成的 DOM 中添加 css 样式。

您可以使用这两个封装来装饰您的组件，并在您的网站中看到样式声明的变化。

注意:某些旧版浏览器不支持 ShadowDom。

现在就性能而言，我认为 ShadowDom 会更好，因为样式是在组件的 div 内声明的。

如果您也想针对旧版浏览器，则“模拟”会更好。