Angular - 5.9-Understanding the encapsulation of views

By default the CSS rules you write inside a component only affect the markup of that component, even though the underlying browser does not have native support for that scoping. This behaviour is called view encapsulation and is one of the small magic tricks Angular performs to keep your styles predictable across a growing application.

If you inspect the DOM of a running Angular app in the browser developer tools, you will notice extra attributes such as _ngcontent-abc-123 on every element belonging to a given component. Those attributes are auto-generated identifiers. Angular rewrites your CSS selectors at build time to include them, so a rule defined in recipe-list.component.css only matches elements created by RecipeListComponent.

Why this matters

• Styles cannot leak from one component to another, even if they share the same tag name.
• Two components can declare the same selector without conflicting.
• The behaviour is mostly transparent — you write standard CSS and trust the framework.

Angular's default emulation mode mimics the Shadow DOM concept without actually using it, which keeps compatibility high across browsers. You can switch the encapsulation strategy per component through the encapsulation property of the @Component decorator — for example to opt into the real Shadow DOM, or to turn encapsulation off entirely and have a component emit truly global styles. Each option has trade-offs we will explore in the next lesson.