Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

ViewEncapsulation

Defines the CSS styles encapsulation policies for the Component decorator's encapsulation option.

See more...

      
      enum ViewEncapsulation {
  Emulated: 0
  None: 2
  ShadowDom: 3
}
    

Description

See Component#encapsulation.

Further information is available in the Usage Notes...

Members

Member Description
Emulated: 0

Emulates a native Shadow DOM encapsulation behavior by adding a specific attribute to the component's host element and applying the same attribute to all the CSS selectors provided via Component#styles or Component#styleUrls.

This is the default option.

None: 2

Doesn't provide any sort of CSS style encapsulation, meaning that all the styles provided via Component#styles or Component#styleUrls are applicable to any HTML element of the application regardless of their host Component.

ShadowDom: 3

Uses the browser's native Shadow DOM API to encapsulate CSS styles, meaning that it creates a ShadowRoot for the component's host element which is then used to encapsulate all the Component's styling.

Usage notes

Example

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