The view encapsulation modes - lordoftheflies/angular-essential-training GitHub Wiki

The Angular framework provides a modular enhancement approach to styling web applications via CSS or Cascading Style Sheets. It supports all of the standard CSS stuff, from style sheets, to selectors and rules and media queries. And in addition, it provides a way to handle component level styling and scoping. Components are the central element of an Angular application. Their styling is controlled via configuration called ViewEncapsulation. The ViewEncapsulation setting can be configured per component in the component metadata via property named encapsulation. Angular provides a TypeScript ENM named "ViewEncapsulation" that can be imported from @angular/core and can be used to set the value of the encapsulation property. Angular comes with a couple of different ViewEncapsulation modes that you can use to configure how you want Angular to handle styling on a component level. Let's go over these different modes, and then in upcoming videos, we will dive into the specifics of how Angular handles its default mode. Angular provides the following ViewEncapsulation modes: Emulated, None, and ShadowDom. There's actually another one called Native that is deprecated, replaced by ShadowDom. You may see this as an option when configuring the ViewEncapsulation mode or working on an older code base of an Angular application. So just a heads up on that. Let's go over each of these, starting first with the None mode and then ShadowDom and finally Emulated. The None mode is used to tell Angular to not do anything special with the CSS for components. So no special modular enhancement to the final CSS that gets delivered to the browser. All of the CSS you write for a component in either the component decorator, metadata, styles property or in a file, referenced by the style URL's Property will get added to the global styles as is, the exact same way you write it. The ShadowDom mode makes use of the browser's native ShadowDom implementation. Now the topic of ShadowDom is out of the scope of this course. But the high level concept of it is a restructuring of the final HTML markup and CSS for a component that instructs the browser how to isolate the component element in a way that its styling and behavior will not bleed over into any other element in the document. The Angular ViewEncapsulation mode of ShadowDom will instruct Angular to render the component in the ShadowDom way. One thing to note here, is that ShadowDom support is not completely available in all browsers. So you'll want to check that before you decide to use this mode for your application. But Angular provides a solution for this, that gives you the majority of the benefits of ShadowDom without relying on the native implementation. And that is via the Emulated mode. The Emulated mode is used to tell Angular to do its modular enhancement to a component template markup and CSS. It does this by emulating the ShadowDom behavior without restructuring the HTML markup and by renaming CSS Selectors to scope them to the component template markup. The Emulated mode is the default mode for components in an Angular application. Default, meaning that without configuring the ViewEncapsulation for components, they will use the Emulated mode automatically. In upcoming videos, we will take a closer look at how Angular does the Emulated mode and see how we can leverage that when writing CSS for components.