ViewEncapsulation ShadowDom vs Emulated

Question

Angular的ViewEncapsulation.ShadowDom和ViewEncapsulation.Emulated有什么区别?

我理解ViewEncapsulation.None的作用，但我没能找到任何有关ViewEncapsulation仿真与ShadowDom的比较。

Answer 1

答案:ViewEncapsulation。模拟器会在你网站的头部部分添加css样式(并引用你组件的唯一id(_ngcontent)来应用它)。ViewEncapsulation。ShadowDom会在你的组件生成的DOM中添加css样式。

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

注意:一些旧的浏览器不支持ShadowDom。

现在性能方面，我认为ShadowDom会更好，因为样式声明在你的组件的div。

如果您也想针对传统浏览器，则仿真将更好。

Answer 2

ViewEncapsulation。仿真= @component样式表之外的其他样式会扩展到组件样式中。

ViewEncapsulation。ShadowDom = @component样式表之外的其他样式不会传播到组件样式中。

:在@component的样式表中定义的样式只应用于这个组件。