In Angular 2, View Encapsulation is used to define the template and style encapsulation variations available within a Component’s Component. In addition, it enables us to use Shadow DOM or maybe even emulate it as per requirements.

There are three view encapsulation types:
  • ViewEncapsulation.None - No Shadow DOM, hence, no style encapsulation.
  • ViewEncapsulation.Emulated - No Shadow DOM but emulated style encapsulation.
  • ViewEncapsulation.Native - Proper Native Shadow DOM.
BY Best Interview Question ON 07 Jan 2022

Example

@Component({
selector: 'my-app',
template: `
<h1>Hello World!</h1>
Shadow DOM Rocks!
`,
styles: [`
:host {
display: block;
border: 1px solid black;
}
h1 {
color: blue;
}
.red {
background-color: red;
}
`],
encapsulation: ViewEncapsulation.ShadowDom
})
class MyApp {
}