Configuring ViewEncapsulation for maximum efficiency

Although it may sound clichéd, Angular 2 was built for the browsers of tomorrow. You can point to why this is the case in a large number of ways, but there is one way where this is extremely true: component encapsulation.

The ideal component model for Angular 2 is the one in which components are entirely sandboxed, save for the few pieces that are externally visible and modifiable. In this respect, it does a bang-up job, but even the most modern browsers limit its ability to strive for such efficacy. This is especially true in the realm of CSS styling.

Several features of Angular's component styling are especially important:

• You are able to write styles that are guaranteed to be only applicable to a component

• You can explicitly specify styles that should be inherited downward through the component tree

• You can specify an encapsulation strategy on a piecewise basis

There are a number of interesting ways to accomplish an efficient component styling...