View Encapsulation In Angular

View Encapsulation in Angular is a way to control how styles (like CSS) apply to the components in your application. Think of it as putting your component's styles in a protective bubble, so they don’t accidentally change other parts of your app. Angular encapsulates styles in a way that they apply to components and are scoped.

There are three types of View encapsulation in Angular: Emulated, ShadowDom, and None which define how to encapsulate styles within components.

• Emulated: This is the default encapsulation mode. Styles from the component are applied to the component and do not leak outside, but the component's elements are not truly isolated.
• ShadowDom: this encapsulation mode uses browser native Shadow DOM which means that styles are scoped to the component and do not leak into other areas of the application.
• None: In this instance, there is no encapsulation applied; hence we have global styles that can affect other components.

Prerequisites

• Basics of HTML, CSS, and JavaScript.
• Angular CLI

Types of View Encapsulation

Let's explain each type one by one:

1. Emulated (Default)

As a result of adding specific attributes to each component's elements and styling them appropriately; so as to emulate the original Shadow DOM behavior, this mode has been created. Consequently, styles will be according to their respective components, but they will lack anything resembling an actual shadow DOM which would involve encapsulation.

Syntax:

encapsulation: viewEncapsulation.Emulated

2. ShadowDom

With true style encapsulation provided by this mode which uses a genuine browser shadow DOM that is associated with it, styles used by a component remain contained within its own shadow area. Therefore they don’t pour out of these containers while styles from outside cannot get through these barriers.

Syntax:

encapsulation: viewEncapsulation.ShadowDom

3. None

In this state there is absolutely no encapsulation. The styles for the item are common throughout the system without being bound even remotely to them .

Syntax:

encapsulation: viewEncapsulation.None

How to Use View Encapsulation in Angular?

To use View Encapsulation in Angular, specify how styles should be applied to your components.

• Choose Encapsulation Type: Angular provides three options for View Encapsulation, 'Emulated' , Shadow DOM' and 'None'. You choose one based on how much control you want over your styles.
• Set Encapsulation in Component: When defining a component in Angular, you can specify the encapsulation type in Component's decorator.
• Add Encapsulation Styling: In your component file, add the 'encapsulation' property to the '@component' decorator and choose one of its options.

Steps To Use View Encapsulation In Angular

Step 1: Install Angular CLI:

If you have not installed Angular CLI, install it by using the following command.

npm install -g @angular/cli

Step 2: Create a new Angular project:

ng new view-encapsulation-demo

Step 3: Navigate to the Project Directory:

cd view-encapsulation-demo

Step 4: Create Components Files for View Encapsulation

Create three new components (one for each view encapsulation type):

ng generate component emulated
ng generate component shadow-dom
ng generate component none

Folder Structure

Dependencies

"dependencies": {
    "@angular/animations": "^18.0.0",
    "@angular/common": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/forms": "^18.0.0",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/platform-server": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@angular/ssr": "^18.0.0",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
}

Example of Using View Encapsulation in Angular

Below is the code example demonstrating view encapsulation in Angular with all three approaches showing their usage.

Emulated Component

In Emulated Component, view encapsulation as emulated will be considered which will showcase the usage and properties of emulated type of encapsulation.

//src/app/emulated/emulated.component.ts
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-emulated',
    standalone: true,
    template: `<h1>Emulated Encapsulation</h1>`,
    styles: ['h1 { color: red; }'],
    encapsulation: ViewEncapsulation.Emulated
})
export class EmulatedComponent { }

Shadow Dom Component

In Shadow Dom Component, we have taken encapsulation as shadow dom which will shown case the usage and properties of shadow dom type of encapsulation.

//src/app/shadow-dom/shadow-dom.component.ts:
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-shadow-dom',
    standalone: true,
    template: `<h2>Shadow DOM Encapsulation</h2>`,
    styles: ['h2 { color: blue; }'],
    encapsulation: ViewEncapsulation.ShadowDom
})
export class ShadowDomComponent { }

None Component

In None Component, we have taken encapsulation as nonewhich will shown case the usage and properties of none type of encapsulation.

//src/app/none/none.component.ts:
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-none',
    standalone: true,
    template: `<h1>No Encapsulation</h1>`,
    styles: ['h1 { color: yellow; }'],
    encapsulation: ViewEncapsulation.None
})
export class NoneComponent { }

App Component

The below mentioned App Component takes the selectors of all the components and adds imports of all the selectors in Typescript file in order to run the Application.

<!--src/app/app.component.html--->
<app-emulated></app-emulated>
<app-shadow-dom></app-shadow-dom>
<app-none></app-none>

//src/app/app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { EmulatedComponent } from './emulated/emulated.component';
import { NoneComponent } from './none/none.component';
import { ShadowDomComponent } from './shadow-dom/shadow-dom.component';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, EmulatedComponent, NoneComponent, ShadowDomComponent],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'view-encapsulation-demo';
}

Add the above codes in the appropriate files, and use the below command to start the application:

ng serve

Output:

Difference between Emulated, ShadowDom and None