Menu
when trying to change encapsulation 4 options appear Emulated, Native, None, and finally new one "ShadowDom". I know ViewEncapsulation.Native for use Shadow DOM.
so what're benefits from using ViewEncapsulation.ShadowDom?
863
ViewEncapsulation.None The viewEncapsulation Native is deprecated since Angular version 6.0.8, and is replaced by viewEncapsulation ShadowDom The Encapsulation methods are added using the encapsulation metadata of the @Component decorator as shown below ViewEncapsulation.Emulated is the default encapsulation method. Open the app.component.html
The viewEncapsulation Native is deprecated since Angular version 6.0.8, and is replaced by viewEncapsulation ShadowDom The Encapsulation methods are added using the encapsulation metadata of the @Component decorator as shown below
Using the Emulated property gives us emulated Shadow DOM/encapsulation which is the default behaviour for Angular Components. Even though it’s a default, we’ll add it to a live example anyway to see what happens. Let’s import ViewEncapsulation from the Angular core and set the encapsulation property:
In Angular a component is a class with its own template and style. When we create a component, Angular puts it’s template into shadowRoot, which is basically the Shadow DOM of that component. In fact, Angular doesn’t use native Shadow DOM, it uses an emulation. As most browsers don’t support Shadow DOM yet.
According to angular.io, Native is now deprecated in favor of ShadowDOM implementation. The reason for the change is that the Native ViewEncapsulation uses the deprecated version of ShadowDOM, and the new one uses the current version of the standard. (For the browsers that support it).
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
