View Encapsulation membuat style komponen terisolasi secara default.

Scoped Style (Default)

@Component({
  template: `<p>Teks merah</p>`,
  styles: [`p { color: red; }`],
})

Style hanya berlaku untuk komponen ini (Angular menambahkan atribut unik).

:host

:host {
  display: block;
  padding: 16px;
}

:host(.active) {
  border: 2px solid blue;
}

ViewEncapsulation

@Component({
  encapsulation: ViewEncapsulation.None, // Style jadi global
  // ViewEncapsulation.Emulated (default)
  // ViewEncapsulation.ShadowDom (true Shadow DOM)
})