Angular - 5.10-Learn more about encapsulation of views

The default emulated view encapsulation is great for most situations, but Angular lets you change the strategy on a per-component basis through the encapsulation property of the @Component decorator. Three modes are available and each comes with its own trade-offs in terms of style isolation, browser support and developer experience.

The three encapsulation modes

• ViewEncapsulation.Emulated — the default. Angular generates unique attributes and rewrites your CSS selectors so the rules only target the component's DOM. No real Shadow DOM, full browser support.
• ViewEncapsulation.ShadowDom — Angular renders the template inside a real shadow root, leveraging native browser isolation. Closest to the platform, but requires modern browsers and changes how external styles reach the component.
• ViewEncapsulation.None — encapsulation is disabled. The component's CSS becomes part of the global stylesheet and can affect any element in the application.

Switching modes is a one-line change: @Component({ ..., encapsulation: ViewEncapsulation.None }). The ViewEncapsulation enum is imported from @angular/core. Use None sparingly, typically for low-level utility components such as a global notification host where you really want the styles to spread. Use ShadowDom when you need rock-solid isolation guaranteed by the platform.

For everyday work the default emulated mode is the sweet spot: predictable scoping, no surprises across browsers, and the freedom to mix component styles with global stylesheets such as Bootstrap. Knowing the three modes exists is useful, switching them should remain a conscious decision.