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

Comments are closed, but trackbacks and pingbacks are open.