Angular Components Created: 06 Jan 2026 Updated: 06 Jan 2026

Encapsulating CSS styling

When you build a component, you want its styles to be modular. Angular provides three strategies to handle how CSS is applied to the DOM. You can control this using the encapsulation property in the @Component decorator.

1. The Default: ViewEncapsulation.Emulated

By default, Angular does not use the real Shadow DOM (which can be incompatible with older browsers). Instead, it emulates it. It adds a unique attribute (like _ngcontent-a-1) to your component's HTML elements and modifies your CSS selectors to match that attribute.

Step-by-Step Example

Step A: Create a Service Card Component

We want this card to have a specific border.

src/app/service-card/service-card.component.css

/* This looks like a global selector, but it is actually scoped! */
div {
border: 2px solid #007bff;
padding: 20px;
border-radius: 8px;
}

src/app/service-card/service-card.component.html

<div>
<h3>Auth Service</h3>
<p>Status: Online</p>
</div>

The Result: Even though we used a general div selector, it will not affect any other div outside of this component. Angular "sandboxes" the style.

2. Breaking the Walls: ViewEncapsulation.None

Sometimes, you want a component to provide global styles (for example, a "Theme Switcher" component). In this case, you can turn off encapsulation.

Step-by-Step Example

Step A: Modify the Component Logic

We tell Angular to stop scoping the styles.

src/app/service-card/service-card.component.ts

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
selector: 'app-service-card',
standalone: true,
templateUrl: './service-card.component.html',
styleUrl: './service-card.component.css',
encapsulation: ViewEncapsulation.None // Scoping is turned off
})
export class ServiceCardComponent {}

The Result: The moment this component is loaded, every div in your entire application (including the index.html and other components) will suddenly have a blue border. The styles "leak" out into the global scope.

3. The Modern Standard: ViewEncapsulation.ShadowDom

This uses the browser's native Shadow DOM API. It creates a completely isolated DOM tree for the component.

  1. Isolation: Global styles from your styles.css will not enter the component.
  2. Encapsulation: The component's styles will not leave the component.
  3. Support: Requires a modern browser that supports Web Components.

TypeScript


@Component({
selector: 'app-service-card',
encapsulation: ViewEncapsulation.ShadowDom
})

Summary Comparison

StrategyBehaviorBest Used For...
Emulated (Default)Scopes CSS using unique HTML attributes.95% of all Angular development.
NoneStyles are global and affect the whole app.Global themes or third-party style overrides.
ShadowDomUses the browser's native isolation.Creating truly independent Web Components.

Pro-Tips for Style Management

  1. Stick to the Default: Always start with Emulated. It provides the best balance between performance and safety.
  2. Avoid Tag Selectors: Even with encapsulation, it is better practice to use classes (e.g., .card-container) instead of tags (e.g., div). This makes your CSS more readable and specific.
  3. The :host Selector: If you want to style the component's actual tag (the <app-service-card> itself), use the special :host selector in your CSS:
/* Styles the component's root element */
:host {
display: block;
margin-bottom: 1rem;
}


Share this lesson:

Details

Category
Angular
Sub: Components
View All Courses Back to Lessons

Navigation

Progress 10 / 22
Start 45% Complete
Template Reference Variables Change Detection
Statistics
11 Lessons in Components
4 SubCategories in Angular
22 Total Lessons in Angular