javascript - Cum funcționează încapsularea CSS a componentelor Angular?

Vreau să înțeleg dacă creez două foi de stil

Stil 1

.heading {
  color: green;
}

Stil 2

.heading {
  color: blue;
}

Acum, dacă aceste două stiluri sunt scrise în două vizualizări diferite, atunci când le redai pe un layout ca Vizualizare Parțială, în acest caz ar putea apărea un conflict și unul ar putea suprascrie stilul celuilalt.

DAR

Folosind Angular (vezi pagina 16), cum se face că aceste două stiluri din componente diferite se afișează pe aceeași pagină cu încapsulare? De ce nu este suprascris CSS-ul?

De exemplu

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

@Component({
 selector: 'app-user-item',
 template: '<p class="heading">abc</p>',
 styleUrls: ['./user-item.css']
})
export class UserItemComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

user-item.css

.heading{ color :green}

app-user.component.ts

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

@Component({
 selector: 'app-user',
 template: '<p class="heading">abc</p>',
 styleUrls: ['./user.css']
})
export class UserItemComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

user.css

.heading{ color :blue}

Când se redă acest lucru pe o pagină:

<app-user></app-user>
<app-user-item></app-user-item>

Acesta este rezultatul:

Răspuns #1

Angular (implicit) emulează un shadow DOM.

Creează dinamic unele atribute HTML care sunt aplicabile doar elementelor din acel component.

De exemplu:

<app-user></app-user>
<app-user-item></app-user-item>

va fi transformat în

<app-user _ngcontent-1></app-user>
<app-user-item _ngcontent-2></app-user-item>

Și CSS-ul tău va fi transformat în:

.heading[_ngcontent-1] { color: blue }
.heading[_ngcontent-2] { color: green }

Poți găsi o explicație mai completă aici și documentația aici

Răspunsul #2

Angular vine cu încapsulare CSS din start. Când se generează un proiect nou, implicit este ca fișierul styles.css de la rădăcina proiectului să se aplice global aplicației, iar stilurile componentelor, precum cele găsite în foo.component.css, să se aplice doar componentului foo și nicăieri altundeva. Dar aceasta nu este singura modalitate prin care stilurile pot fi încapsulate în Angular, să aruncăm o privire mai atentă.@Component({ selector: 'app-foo', templateUrl: './foo.component.html', styleUrls: ['./foo.component.css'] })