View Encapsulation

Question 1

What is View Encapsulation

Answer 1

In Angular, component CSS styles are encapsulated into the component’s view an don’t affect the rest of the application.

Question 2

View Encapsulation modes

Answer 2

These modes control how encapsulation happens on a per component basis:

• ShadowDom - Uses the browser’s native shadow DOM implementation to attach a shadow DOM to the component’s host element, and then puts the component view inside that shadow DOM.
• Emulated - Emulates the behavior of shadow DOM by preprocessing and renaming the CSS code to effectively scope the CSS to the component’s view
• None - Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don’t apply.

Question 3

How to set View Encapsulation

Answer 3

Use the encapsulation property in the component metadata:

encapsulation: ViewEncapsulation.ShadowDom

Question 4

What is _nghost

Answer 4

An element that would be a shadow DOM host in native encapsulation has a generated _nghost attribute. This is typically the case for component host elements.

Question 5

What is _ngcontent

Answer 5

An element within a component’s view has a _ngcontent attribute that identifies to which host’s emulated shadow DOM this element belongs.