Angular Brings — View Encapsulation

In this article we will briefly know about the concept of , what view-encapsulation is and how it manipulate with the DOM. We will also gonna see about some sub-concepts of view encapsulation(like Shadow DOM etc) which will give an idea of how its works. So lets get started.

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.

In these, one main keyword is Shadow DOM. So what is Shadow DOM?

ShadowDOM is nothing but , it allow us to apply Scoped styles to elements without affecting to other elements.

ShadowDOM serves for encapsulation. It allows a component to have its very own “shadow” DOM tree, that can’t be accidentally accessed from the main document, may have local style rules, and more.

For e.g if we have a div in our own html document and that div has a className “capture” which has color: red, and in the same document if we have a third party html code rendered and its has same className “capture” but color:yellow. so here what will happen in the document the color of the both elements (i.e our document element and third party document) element will have same color:red because it will apply global CSS to both on our div and third party library. So here ShadowDOM becomes necessary to help third party library not to override with our global CSS.

For better understanding of Shadow DOM , you can find this link and understand it deeply . Shadow DOM.

Now we will see some examples to understand view encapsulation and its types. Here below is the images of its types.

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”.

Here i will be calling “view-encapsulation” as parent component and “child-encapsulated” as child component.

So now i have added a style for h1 in parent class as shown in below image.

parent css

And in html i have rendered child component in parent component as shown in below.

parent html component.

Same in child component html i have used h1 tag , as shown in below image.

Child html component

Now guess what will happen , as we have mention in above that we have encapsulated child component in parent component , and parent component has a style on h1 i.e color red. so should h1 tag of child component will also turn into red?. Let look into below image.

View of parent

So why it happens, why didn’t it have the color red for child component as it is encapsulated with parent , because Angular by default use Emulated View-Encapsulation without declaring the encapsulation in our model. If I inspect and show you (i.e in below image), then it has its own host id which creates their own style scope, so that’s why it doesn’t override with child h1 element.

Inspected Element to show difference host id for Emulated .

So if you can see in above image we have _ngcontent-soh-c111 for parent and _ngcontent-soh-c110 for child, and that’s the catch where it behave different scope views and follows Emulated encapsulation.

If i show you how Emulated encapsulation syntax is used, below is the image for that, i have written in parent component.ts. It will give same output as image of(View Parent)

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

So we have seen that if we use None encapsulation we see now the parent style scope is also applied on the child. If we inspect the element we will see there is no ng host to differentiate the elements and hence we see the h1 style is applied to child also.

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.

Now if i apply ShadowDom Encapsulation , it will behave like None Encapsulation but , they are not same.

Let me inspect for you, and tell the difference :

ShadowDom inspect

Now if you look into the above image of ShadowDom inspect, you will be seeing that the parent component is fully encapsulated with child component , which has created a shadow-root and for that reason the child is also get the styled for the h1 element. But if we want that the child component should not get affected by its parent style , we also have to encapsulate the child component with ShadowDom, and hence it will not get affected by parent’s style. Below are the images for the particular implementation.

child component encapsulation

ShadowDom in child

Now if you have seen the above table , which has a value column, it indicates that we can , you can alternatively write the value instead of writing the terminology. For e.g in the given below image i have used value 3 which indicates that it is for ShadowDom Encapsulation.

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.

So, Guys I have tried to make this topic as easy as possible from my side. Hope you find it useful and now you can go deep dive and play with this topic.

Happy Coding …