Scoped Styling and View Encapsulation

Angular scopes component styles to prevent CSS leakage between components. This is called view encapsulation.

Emulated (Default)

Angular adds unique attribute selectors to component styles so they only apply to the component's template.

@Component({
  selector: 'app-button',
  template: `<button class="btn">Click</button>`,
  styles: [`
    .btn {
      background: blue;
      color: white;
      padding: 8px 16px;
    }
  `],
  // encapsulation: ViewEncapsulation.Emulated // default
})
export class ButtonComponent {}

The compiled CSS becomes:

.btn[_ngcontent-abc123] {
  background: blue;
  color: white;
  padding: 8px 16px;
}

ShadowDom

Uses the browser's native Shadow DOM for true style isolation:

@Component({
  selector: 'app-button',
  template: `<button class="btn">Click</button>`,
  styles: [`.btn { background: blue; }`],
  encapsulation: ViewEncapsulation.ShadowDom,
})
export class ButtonComponent {}

Benefits:

• True style isolation (no leakage in or out)
• No global styles affect the component

Drawbacks:

• Some CSS features (like :host) behave differently
• Third-party libraries may not work correctly

None

No encapsulation — styles are global:

@Component({
  selector: 'app-button',
  template: `<button class="btn">Click</button>`,
  styles: [`.btn { background: blue; }`],
  encapsulation: ViewEncapsulation.None,
})
export class ButtonComponent {}

The CSS is applied globally without any scoping attributes. Use with caution.

Encapsulation Comparison

::ng-deep allows a component's styles to affect child components. It is discouraged but sometimes necessary.

::ng-deep Usage

@Component({
  selector: 'app-parent',
  template: `<app-child></app-child>`,
  styles: [`
    ::ng-deep .child-class {
      color: red;
    }
  `],
})
export class ParentComponent {}

This applies the style to .child-class inside app-child, piercing the child's encapsulation.

Why ::ng-deep Is Discouraged

1. Breaks encapsulation — Parent styles leak into child components
2. Hard to maintain — Styles are scattered across components
3. Deprecated — The Angular team plans to remove it

Better Alternatives

1. Use CSS Custom Properties:

// Parent
@Component({
  styles: [`
    app-child {
      --accent-color: red;
    }
  `],
})

// Child
@Component({
  styles: [`
    .child-class {
      color: var(--accent-color, blue);
    }
  `],
})

2. Use Input Properties:

// Child accepts a theme input
@Input() theme: 'light' | 'dark' = 'light';

3. Use Global Styles:

/* styles.css */
app-child .child-class {
  color: red;
}

:host and :host-context

@Component({
  selector: 'app-card',
  styles: [`
    :host {
      display: block;
      border: 1px solid #ccc;
    }

    :host(.active) {
      border-color: blue;
    }

    :host-context(.dark-theme) {
      background: #333;
      color: white;
    }
  `],
})
export class CardComponent {}

• :host — targets the component's host element
• :host(.class) — targets the host when it has a specific class
• :host-context(.class) — targets the host when an ancestor has a class