In this article, we will look at what is View Encapsulation? How does it work? What types do Angular views encapsulate? What is Shadow DOM? Does Angular applications support style ranges even if browsers don’t support Shadow DOM? We’ll look at the whole list of questions in detail!

First, let me explain the use case to you, for example, we have two components:

app.component // 1. parent component
demo.component // 2. child component
Copy the code

We will use the Demo component within the app component! We now have an H1 selector on both components to display the title, and since view encapsulation works with styles, we create styles for the h1 selector in the APP component. Now, when we call the Demo component inside the APP component, the Demo component also has an H1 selector. What happened then? Should the styles we create on the APP component be automatically applied to the H1 selector of the Demo component? Well, the answer is no (actually depending on what type of ViewEncapsulation you use), Angular applications use the ViewEncapuslation mode for emulation. What’s that? So, this article provides all the answers about ViewEncapsulation and how it works with Angular applications.

Before we start looking at how ViewEncapusaltion works in Angular applications, we should first look at the term Shadow DOM.

Shadow DOM:

In short, Shadow DOM allows us to apply scoped styles to elements without affecting other elements.

Learn more about Shadow DOM

ViewEncapsulation Types:

mode value description
Emulated (default) 0 Emulate Native scoping of styles by adding an attribute containing surrogate id to the Host
Native 1 Use the native encapsulation mechanism of the renderer
None 2 Don’t provide any template or style encapsulation
ShadowDom 3 Use Shadow DOM to encapsulate styles

So, now let’s look at ViewEncapsulation mode

1.ViewEncapsulation.None

As mentioned above, I created two components:

app.compontent.html

<h1>{{title}}</h1>
<hr>
<app-demo></app-demo>
Copy the code

app.component.ts

import { Component,ViewEncapsulation} from '@angular/core';
Copy the code
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation:ViewEncapsulation.None
})
export class AppComponent {
title = 'Hello from Parent';
}

app.component.css

h1{
  background: blue;
  text-transform: uppercase;
  text-align: center;
}
Copy the code

In the Demo component, we also use the H1 selector to display the title. When we set ViewEncapsulation mode to None, parent components of the same style will be assigned to children. Find the Demo component below.

demo.component.html

<h1>{{title}}</h1>
Copy the code

demo.component.ts


import { Component, OnInit } from '@angular/core';
Copy the code
@Component({
selector: 'app-demo',
templateUrl: './demo1.component.html',
styleUrls: ['./demo1.component.css']
})
export class Demo1Component implements OnInit {
title = 'Hello from Child';
constructor() { }
ngOnInit() {
}
}

Output:

2. ViewEncapsulation.Emulated

Now, if we change ViewEncapsulation mode to emulation mode, which is provided by default for Angular applications, the output will be different. Although it doesn’t use Shadow DOM, you can still limit the style scope to specific elements. And since it doesn’t use Shadow DOM, it can still run in browsers that don’t support Shadow DOM. Here’s the updated app.component.ts

import { Component,ViewEncapsulation} from '@angular/core';
Copy the code
@Component({
selector: 'jinal',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation:ViewEncapsulation.Emulated
})
export class AppComponent {
title = 'Hello from Parent';
}

We just updated the ViewEncapsulation mode, everything else is the same as before.


As you can see, our components and styles have been rewritten and unique ID types have been added for styles and selectors to determine the scope of styles without using the Shadow DOM. Isn’t that a good idea?

It already assigns ID _ngContent-c0 to our style and the same ID to our APP.component.h1 selector, but for the demo component’s H1 selector, it assigns a different ID and _ngContent-C1.

If it is helpful to you, you can pay attention to it. This article will continue to be updated.