Return to site

ANGULAR INTERVIEW QUESTION: What is the ViewEncapsulation in an Angular component?

Angular is built from the Web Components standard, a set of technologies whom one is the Shadow DOM.

The Shadow DOM allows to define a local behavior of a webpage in the DOM, without interfering wit other parts of your application: events, HTML elements, CSS style, etc.

Angular provides three strategies to achieve Shadow DOM:

𝐄𝐦𝐮𝐥𝐚𝐭𝐞𝐝

It is the default strategy that Angular uses, it simulates the behavior of the Shadow DOM, but it is able to work on any browser, because the Shadow DOM is a recent feature, hence not supported by all browsers.

𝐍𝐚𝐭𝐢𝐯𝐞

This strategy supports the specifications of the Shadow DOM. It is useless, as default mode covers it.

𝐍𝐨𝐧𝐞

It is a feature to disable the component encapsulation. You risk to have collision between your components.

The most common used strategy is Emulated.