Angular - ShadowDom Encapsulation

---

---

ViewEncapsulation.ShadowDom

ShadowDom mode will apply the HTML native shadow dom concept to scope the style of the component. The element of the component will not be affected by the global styles in any situation as it completely hide using shadowDOM concept.

Example - Usage of ShadowDom Encapsulation

Let us create a simple component to check how ViewEncapsulation.None mode works.

Step 1: Navigate to the project folder using cd command. Create a new component and name it view-encapsulation-sample.

ng generate component view-encapsulation-sample
CREATE src/app/view-encapsulation-sample/view-encapsulation-sample.spec.ts (675 bytes)
CREATE src/app/view-encapsulation-sample/view-encapsulation-sample.ts (271 bytes)
CREATE src/app/view-encapsulation-sample/view-encapsulation-sample.css (0 bytes)
CREATE src/app/view-encapsulation-sample/view-encapsulation-sample.html (41 bytes)

Step 2: Now, go to view-encapsulation-sample.ts file. Add ViewEncapsulation.None mode for the component as shown below −

view-encapsulation-sample.ts

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
   selector: 'app-view-encapsulation-sample',
   imports: [],
   templateUrl: './view-encapsulation-sample.html',
   styleUrl: './view-encapsulation-sample.css',
   encapsulation: ViewEncapsulation.None
})
export class ViewEncapsulationSample {

}

Step 3: Change the template, view-encapsulation-sample.html and add two containers as shown below −

view-encapsulation-sample.ts

<div>I am inside the none container</div>
<div class="mystyle">I am inside the none container and has my own style</div>

Here, the first container does not have any styles or class and it is more prone to get affected by the global styles. The second container has class attributes and yet has a chance to get affected by global styles.

Step 4: Apply the style in the component css file, view-encapsulation-sample.css as shown below −

view-encapsulation-sample.css

div.mystyle { color: brown }

Step 5: Add the component in the app component and app.html as shown below −

app.ts

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ViewEncapsulationSample } from './view-encapsulation-sample/view-encapsulation-sample';

@Component({
   selector: 'app-root',
   imports: [RouterOutlet, ViewEncapsulationSample],
   templateUrl: './app.html',
   styleUrl: './app.css'
})
export class App {
   protected readonly title = signal('expense-manager');
}

app.html

<app-view-encapsulation-sample />
<router-outlet />

Step 6: Add a style in the global css assets, styles.css targeting div tag and run the application.

styles.css

div { color: blue }

Output

Now, Run the application and check the output.

Now, both containers are safeguarded by native shadowDOM concept and are not affected by the global styles.

Applying different encapsulation in an application

View encapsulation of a component can be different from other components used in the application as view encapsulation is applied per component basis. Even the nested component can have different view encapsulation options as per component requirements. Angular will apply the encapsulation as directed even in very complex nested component trees as well.