Introduction
Angular applications are styled with standard CSS. Therefore it means you can apply everything you know about CSS stylesheets, selectors, rules, and moreover media queries directly to Angular applications.
However angular can bundle component styles with components, enabling a more modular design than regular stylesheets.
Therefore for every Angular component you write, you can define not only an HTML template
moreover also the CSS styles that go with that template, specifying any selectors, rules, and media queries that you need.
Thus, View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa.
The Component’s decorator provides the encapsulation option which can be used to control however the encapsulation is applied on a per component basis.
There are 3 types of view encapsulation:
- ViewEncapsulation.None
- ViewEncapsulation.Emulated
- ViewEncapsulation.ShadowDom
ViewEncapsulation.None
Angular does not apply any sort of view encapsulation meaning that any styles specified for the component. Hence they are globally applied and can affect any HTML element present within the application. Therefore this mode is essentially the same thing as including the styles into the HTML itself.
@Component({
selector: 'app-no-encapsulation',
template: `
<h2>None</h2>
<div class="none-message">No encapsulation</div>
`,
styles: ['h2, .none-message { color: red; }'],
encapsulation: ViewEncapsulation.None,
})
export class NoEncapsulationComponent { }
Therefore, in ViewEncapsulation.None, the style is in the DOM’s head section and is having scope of the component. There is no Shadow DOM for the component and the component style can affect all nodes in the DOM.
ViewEncapsulation.Emulated
Angular modifies the component’s CSS selectors hence they are only applied to the component’s view.
Moreover they do not affect other elements in the application (emulating Shadow DOM behavior).
@Component({
selector: 'app-emulated-encapsulation',
template: `
<h2>Emulated</h2>
<div class="emulated-message">Emulated encapsulation</div>
<app-no-encapsulation></app-no-encapsulation>
`,
styles: ['h2, .emulated-message { color: green; }'],
encapsulation: ViewEncapsulation.Emulated,
})
export class EmulatedEncapsulationComponent { }
Therefore, in ViewEncapsulation.Emulated, Angular has created the style in the head section of the DOM and given an arbitrary id to the component. On basis of ID, selector style is havinf scope of the component.
ViewEncapsulation.ShadowDom
Angular uses the browser’s built-in Shadow DOM API) to enclose the component’s view inside a ShadowRoot (used as the component’s host element).Hence we apply the provided styles in an isolated manner.
@Component({
selector: 'app-shadow-dom-encapsulation',
template: `
<h2>ShadowDom</h2>
<div class="shadow-message">Shadow DOM encapsulation</div>
<app-emulated-encapsulation></app-emulated-encapsulation>
<app-no-encapsulation></app-no-encapsulation>
`,
styles: ['h2, .shadow-message { color: blue; }'],
encapsulation: ViewEncapsulation.ShadowDom,
})
export class ShadowDomEncapsulationComponent { }
Therefore, in ViewEncapsulation.Native, Angular creates a Shadow DOM and moreover the style is scoped to that Shadow DOM.
Conclusion
Hence in this blog, we understood what is view encapsulation in angular. Moreover how does it effects the styles applied to component and its relative component.
View Encapuslation defines whether the template and styles defined within the component can affect the whole application or vice versa. Therefore Angular provides three encapsulation strategies namely Emulated, Shadow DOM and No Enapsulation.
Demo Project Repo Link – https://github.com/knolderdev/EncapsulationApp
