Switching to Angular - Third Edition

Introducing the component's view encapsulation

As we know, Angular is inspired from web components, whose core feature is the shadow DOM. The shadow DOM allows us to encapsulate the styles of our web components without allowing them to leak outside the component's scope; Angular provides this feature. If we want Angular to use the shadow DOM, we can use ViewEncapsulation.Native. However, at the time of writing this book, the shadow DOM is not supported by all browsers; if we want to have the same level of encapsulation without using the shadow DOM, we can set the value of the encapsulation property to ViewEncapsulation.Emulated.

If we don't want to have any encapsulation at all, we can use ViewEncapsulation.None. By default, the renderer ...