Shadow DOM and View Encapsulation in Angular2

Angular 2 is component based which means that every UI functionality is built as a component. Therefore, as component based styling is a recommended pattern, Angular 2 is just about to make writing styles a rather enjoyable experience. We will discuss different styling techniques and how to use them, but before that, we need to understand the concept of Shadow DOM and View Encapsulation.

Shadow DOM basically allows group of DOM implementation to be hidden inside a single element (which is the basic idea of components) and encapsulate styles to the element.

Setting encapsulation is quite simple and is done right inside the @component decorator:

@Component({
templateUrl: 'card.html',
styles: [`
.card {
height: 70px;
width: 100px;
}
`],
encapsulation: ViewEncapsulation.Native
// encapsulation: ViewEncapsulation.None
// encapsulation: ViewEncapsulation.Emulated is default
})

Component Inline Styles

This technique is the most obvious styling technique in Angular 2. This is because it is recommended, makes sense with the concept of components in mind and found everywhere in the Angular 2 documentation. It is implemented in the @Component decorator of our component class like so:

@Component({
templateUrl: 'card.html',
styles: [`
.card {
height: 70px;
width: 100px;
}
`],
})

The expected behaviour in various view encapsulation techniques are:

  • None: The style is wrapped in a style tag and pushed to the head
  • Emulated: The style is wrapped in a style tag, pushed to head and uniquely identified so it can be matched with its component's template. With that, the styles will be used for only the template in the same component.
  • Native: Behaves as expected of web components.

External Stylesheets

@Component({
styleUrls: ['css/style.css'],
templateUrl: 'card.html',
})

Template Inline Style

This is achievable with two methods:

1) The styles can be wrapped in a style tag and placed before the templates:

@Component({
template: `
<style>
h1 {
color: purple;
}
</style>
<h1>Styling Angular Components</h1>
`
})

2) The style can be written as normal inline styles in the template tags:

@Component({
template: '<h1 style="color:pink">Styling Angular Components</h1>'
})

The expected behavior in various view encapsulation techniques are:

  • None: For method 1, the style is wrapped in a style tag and pushed to the head. It is appended right after the component inline and external styles. For method 2, the style just remains in the tag.
  • Emulated: For method 1, the style is wrapped in style tag, pushed to head and uniquely identified so it can be matched with its component's template just like component inline style. For method 2, the style still remains in the tag.
  • Native: Behaves as expected of web components.

Conclusion

Whatever method you choose is accepted and that is the good thing about components and Angular 2. You don’t have to listen to the preaching of not using internal styles or inline styles as they are within components and will be scoped.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.