View Encapsulation

Written By:

Updated on

  1. Home
  2. Frontend
  3. Angular
  4. Routing
  1. Emulated
  2. None
  3. Shadow DOM

View Encapsulation in Angular controls how styles (CSS) defined in a Component and applied to view and is scoped. It can prevent styles to run in particular component only and not effecting whole angular application. This is helful in preventing conflict of css, css scope and to improve reusability.

Types of View Encapsulation in Angular

  1. Emulated ( default )
  2. None
  3. ShadowDOM
  4. Native (Deprecated in Angular 6.1)

Emulated

Encapsulation Emulated is the default Encapsulation in Angular. In Emulated Encapsulation, the style to component element to scoped to component only. This is recommended if components have different different styles.

Encapsulation Emulated Advantages

  1. Angular will not create SHADOW DOM for components
  2. The Style will be scoped to component only.

  import { Component } from '@angular/core';
  import { RouterOutlet } from '@angular/router';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { ChildComponent } from './child/child.component';
  import { ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    encapsulation:ViewEncapsulation.Emulated,
    imports: [RouterOutlet,FormsModule,CommonModule,ChildComponent],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
  })
  
  export class AppComponent{
    title = 'myApp';
  }

None

Encapsulation None is recommended when we want to share styles across components. The styles are applied globally so chaild component can access parents styles.

Encapsulation None Advantages

  1. No SHADOW DOM
  2. The Style not scoped to component.

  import { Component } from '@angular/core';
  import { RouterOutlet } from '@angular/router';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { ChildComponent } from './child/child.component';
  import { ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    encapsulation:ViewEncapsulation.None,
    imports: [RouterOutlet,FormsModule,CommonModule,ChildComponent],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
  })
  
  export class AppComponent{
    title = 'myApp';
  }

Shadow Dom

Shadow DOM is new and is supported in browsers after 2018. It create Shadow DOM for components. To check Shadow DOM, open Inspect in browser and check <app-root>.

The styles in ShadowDom is scoped to component, but still child element is using parents style because of ShadowDOM.

Encapsulation ShadowDom Advantages

  1. Angular will create Shadow DOM for component
  2. The Style is scoped to component.

  import { Component } from '@angular/core';
  import { RouterOutlet } from '@angular/router';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { ChildComponent } from './child/child.component';
  import { ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    encapsulation:ViewEncapsulation.ShadowDom,
    imports: [RouterOutlet,FormsModule,CommonModule,ChildComponent],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
  })
  
  export class AppComponent{
    title = 'myApp';
  }