ViewEncapsulation ShadowDom vs Emulated

Question

What is the difference between Angular's ViewEncapsulation.ShadowDom to ViewEncapsulation.Emulated ?

I understand what ViewEncapsulation.None does, but I wasn't able to find any relevant comparison on ViewEncapsulation Emulated vs ShadowDom.

Answer 1

ViewEncapsulation.Emulated = other styles outside the @component stylesheet propogate into the components styles.

ViewEncapsulation.ShadowDom = other styles outside the @component stylesheet do not propogate into the components styles.

for both encapsulations: the styles that are defined in the @component's stylesheet are applied to this component only.

Answer 2

Answer: ViewEncapsulation.Emulated will add the css style in the head section of your website(and reference your component's unique id(_ngcontent) to apply it). ViewEncapsulation.ShadowDom will add the css style inside the generated DOM of your component.

You could decorate your component with these two encapsulation and see the change in the style declaration in your website.

Note: ShadowDom is not supported by some of the legacy browsers.

Now performance-wise I think that ShadowDom will be better as the style are declared inside your component's div.

While Emulated will be better if you want to target the legacy browser as well.