ViewEncapsulation ShadowDom vs Emulated

Question

Angular 的ViewEncapsulation.ShadowDom和ViewEncapsulation.Emulated什么區別？

我了解ViewEncapsulation.None的作用，但在 ViewEncapsulation Emulated 與 ShadowDom 上找不到任何相關比較。

Answer 1

ViewEncapsulation.Emulated = @component 樣式表之外的其他樣式傳播到組件樣式中。

ViewEncapsulation.ShadowDom = @component 樣式表之外的其他樣式不會傳播到組件樣式中。

對於這兩種封裝：@component 樣式表中定義的樣式僅應用於此組件。

Answer 2

答： ViewEncapsulation.Emulated 將在您網站的 head 部分添加 css 樣式（並引用您組件的唯一 id(_ngcontent) 來應用它）。 ViewEncapsulation.ShadowDom 將在組件生成的 DOM 中添加 css 樣式。

您可以使用這兩種封裝來裝飾您的組件，並在您的網站中查看樣式聲明的變化。

注意：一些舊版瀏覽器不支持 ShadowDom。

現在在性能方面，我認為 ShadowDom 會更好，因為樣式是在組件的 div 中聲明的。

如果您還想針對舊版瀏覽器，Emulated 會更好。