Angular Brings — View Encapsulation

So what exactly is View Encapsulation?

In Simple words, Each component has its own styled css, which is encapsulated into its own component view and don’t affect the rest of the application.

Types of View Encapsulation

1.Emulated View-Encapsulation

So in these example i have created a component named “view-encapsulation” and another named “child-encapsulated”. And in “view-encapsulation “ component i have attached the selector of “child-encapsulated” so it becomes child component for “view-encapsulation”.

parent css
parent html component.
Child html component
View of parent
Inspected Element to show difference host id for Emulated .
Emulated Encapsulation

2. None Encapsulation

Now if i change encapsulation mode to None , so now what happens lets see in below images.

None Encapsulation
View of None Encapsulation
None Encapsulation inspect.

3. Native / ShadowDom Encapsulation

Before ShadowDom ,we were calling it as Native Encapsulation, but now it’s been deprecated so it’s no longer being used.

ShadowDom inspect
child component encapsulation
ShadowDom in child
Value Based Encapsulation

Summary:

  1. None: No ShadowDom is created and no style encapsulation takes place.
  2. ShadowDom: ShadowDom is created and style encapsulation takes place.
  3. Emulated: No ShadowDom is created and style encapsulation takes place.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aayush Bhankale

Aayush Bhankale

A enthusiastic web developer ,who is curious about technologies.