The difference between Angular’s Emulated Shadow DOM and native Shadow DOM

In Angular, components styles can be encapsulated. There are three different encapsulation strategies available. None, Emulated and ShadowDom.

None is probably the least interesting. It just disables encapsulation completely. But what is the difference between Emulated and ShadowDom?Let’s find out!

What is Shadow DOM?

Before we dive into the differences between encapsulation Emulated and ShadowDom we first have to understand what Shadow DOM is.

Shadow DOM is part of the Web Components standard. It enables style and DOM tree encapsulation. This encapsulation allows us to hide DOM logic behind elements and scope the styles to an element. Scoped styles have the advantage that they don’t leak out.

This allows us to create components styles that will only apply to the component and not impact the rest of our page.

Shadow DOM in Angular

Angular is inspired by Web components. Therefore not surprisingly, Angular comes with a similar construct, an Angular component. In Angular, a component consists of a TypeScript class, aka controller, a template, and styles.