JavaScript Edu Resources. Angular Courses. React Tutorials. Join us!

View Encapsulation in Angular 2

  • We mentioned that all our component styles are appended to the document head, but usually would end up in the component’s template, in case we use native Shadow DOM.
  • Whenever we create a component, Angular puts it’s template into a , which is the Shadow DOM of that particular component.
  • We talked about that in a more detail in styling Angular components, but to make a quick recap, having a zippy component with styles like this (note that we set the property in our decorator):

    And a template like this:

    Will make Angular creating a DOM like this:

    Again, this is due to the fact that there’s no Shadow DOM.

  • If there was Shadow DOM, Angular could just write all the styles into the which will enable style encapsulation.
  • Since there’s no Shadow DOM, Angular has to write the styles to the head of the document.

View Encapsulation in Angular by thoughtram