What is View Encapsulation in Angular | View Encapsulation | Angular 15+

View Encapsulation in Angular is a technique used to control the scope of CSS styles defined within a component, preventing them from leaking out and affecting other elements or components in the application. Angular offers three encapsulation strategies, which determine how styles are applied and isolated:

There are three types of View encapsulation in Angular
ViewEncapsulation .None >> any class of css will applied to whole application ie text-success

None: In this mode, Angular does not provide any style encapsulation. Styles defined within the component are treated as global styles and can affect other elements and components throughout the application. This mode can be useful if you intentionally want to create global styles or override existing styles.

ViewEncapsulation.Emulated >> each component has its own dom and own css

Emulated (default): In this mode, Angular emulates shadow DOM by adding unique attributes to the host element and styles defined within the component, effectively scoping the styles to the component only. Although the styles are still in the global CSS, Angular ensures that they only affect the component they belong to.

ViewEncapsulation. ShadowDOM >>

In ViewEncapsulation.Emulated angular add a unique attribute to each component element

In this mode, Angular uses the native Shadow DOM implementation provided by the browser to encapsulate styles. It attaches a shadow DOM to the host element, and styles are defined within the shadow DOM, isolating them from the rest of the application. This mode offers better style encapsulation but has limited browser support.

First of all you need to import 

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

We can set encapsulation  in @component

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
  encapsulation: ViewEncapsulation.None
})

Example:

1.Emulated (default):

//app.component.ts:
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<h1>Emulated View Encapsulation</h1>`,
  styles: [`h1 { color: red; }`],
})
export class AppComponent { }

Output

<!-- Angular adds a unique attribute to the element and the styles -->
<app-root _ngcontent-c0>
  <h1 _ngcontent-c0>Emulated View Encapsulation</h1>
</app-root>

2.None:

//app.component.js
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<h1>None View Encapsulation</h1>`,
  styles: [`h1 { color: green; }`],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent { }

output:

<!-- No unique attribute is added, styles are treated as global -->
<app-root>
  <h1>None View Encapsulation</h1>
</app-root>

3.ShadowDom

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<h1>Shadow DOM View Encapsulation</h1>`,
  styles: [`h1 { color: blue; }`],
  encapsulation: ViewEncapsulation.ShadowDom,
})
export class AppComponent { }

output:

<!-- A shadow root is created for the component -->
<app-root>
  #shadow-root
    <style>
      h1 { color: blue; }
    </style>
    <h1>Shadow DOM View Encapsulation</h1>
</app-root>