What is encapsulation? Among the many good answers that can be easily found around the web, the one given by the software engineer Edward V. Berard is perhaps the most exhaustive one:

When thinking about encapsulation in object-oriented programming, the best example we can come up with is probably the concept of namespacing. Namespaces are a basic form of encapsulation that allows us to recycle/reuse the same property, method, and function names without the risk of hitting name conflicts; other good examples are the local variables within a method, the class instances built within a using statement block, the threading isolation strategies, and so on.

CSS encapsulation has always been one of the web developer's most wanted dreams. The reason for that is simple to understand: the ability to style a specific component without affecting the others, or to restrict the scope of some CSS selectors without the risk of overwriting something more general, is definitely something that will save a lot of work.

The great news here is that Angular provides CSS encapsulation as a built-in feature. That's it. There's nothing we need to do, it's already there, in our current components. We can easily confirm that by launching our project in debug mode and looking at the generated HTML code using a DOM inspector--such as the one shipped with Edge, that can be activated by pressing F12.

Here's the evidence:

As we can see, Angular automatically inserts a custom HTML5 attribute to all the elements within the component; that attribute will then be prepended to each CSS selector, thus acting like a pseudo-namespace that will restrict the scope of those styles to that component only.