Understanding DOM shadowing using View Encapsulation in Angular2

Understanding View Encapsulation

View Encapsulation in Angular 2 is kind of used to restrict the access to some kind of data or simply just restrict the access to the data. Angular 2 is inheriting all the features of web component which were initially defined in the polymer like HTML import custom elements, DOM shadowing etc. Dom shadowing means we are actually trying to wrap up or we are trying to encapsulate the DOM inside the DOM which can be visible to the outside world or which can be isolated for that particular division. So, therefore, View Encapsulation is available in the Angular 2 components. There are three different types of view encapsulation that angular component can have – one is the default which is called emulated, other is native and the third one is none. The role of Dom shadowing is that it is a concept which enables us to isolate the styling of a particular component isolated from the outside world. For example, we can specify the styles in the @Component decorator of a particular component and we can use this component at a number of places in our Angular 2 app. But we want to apply these styles only to this particular component and we don’t want the styles applied in this component to effect any other part or component of the app. So Angular uses Dom shadowing using which we are encapsulating styles for this component only.

How does shadow dom work with view encapsulation?

So how is it happening? When we are using the default value for view encapsulation i.e. emulated and run our app in the browser and inspect our styles using developer’s tool, we can observe that some strange kind of attribute like “_ngcontent-xyz-” is appended to the elements of the component and this behavior is enforced by Angular itself and has no relation to the browser. So the reason for adding such attributes is none other than providing a particular identity to the elements or classes belonging to the same component which means that angular kind of emulates the shadow dom. The shadow dom is a technology which is not supported by all the browsers where each element has kind of its own shadow dom behind it where you then could assign styles to each element. But as this technology is not supported by all the browsers, this is how angular emulates it and that is the default behavior of view encapsulation in angular.

Though we can override this behavior provided by angular. To override this behavior we can add a property to our @Component decorator which is called encapsulation and set the value to ViewEncapulstion and now we can choose between three modes – Emulated, Native and None. Have a look on the code below to understand the component.ts file:-

import { component , OnInit , ViewEncapsulation } from ‘@angular/core’;
@Component({
     selector: ‘xyz’,
     templateUrl : ‘./xyz.component.html’,
     stylesUrl: [‘./xyz.component.css’],
    encapsulation: ViewEncapsulation.Emulated
})

export class XyzComponent implements OnInit{

    constructor(){ }

    ngOnInit(){ }
}

Emulated: From the above given three modes of view encapsulation, Emulated is the default and we don’t need to add this.

None: If we use ViewEncapsulation.None and then we inspect our element in the browser we find that now we don’t see those strange attributes like “_ngcontent-xyz-” on our elements. Therefore this component now does not use View Encapsulation. However, the other components will still use view encapsulation but if we define any styles for this particular component in the CSS file of this component then it will be applied globally. So, therefore, affecting the other components also and application wide.

Native: Besides None, we can also choose Native and Native uses the shadow dom technology. This would give you the same result as before with Emulated but only in the browsers which supported shadow dom which is why in most cases we will use Emulated but we are aware that we could switch to Native or None as per our requirements.