ViewEncapsulation
Defines the CSS styles encapsulation policies for the Component
decorator's
encapsulation
option.
enum ViewEncapsulation {
Emulated: 0
None: 2
ShadowDom: 3
}
Description
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 This is the default option. |
None: 2
|
Doesn't provide any sort of CSS style encapsulation, meaning that all the styles provided
via |
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 {}