Désactiver l'isolation des CSS

Angular a adopté une stratégie très protectrice pour vos feuilles de styles. Il va les retraiter pour assurer leur isolation par rapport au reste de la page. Par exemple:

<!-- Quand j'écris le code suivant -->
<hero-details>
  <h3>Team</h3>
</hero-detail>

<!-- Angular va générer ce DOM -->
<hero-details _nghost-pmm-6>
  <h3 _ngcontent-pmm-6>Team</h3>
</hero-detail>

/* Quand j'écris le code suivant */
h3 {
  color: hotpink;
}

/* Angular va générer ce CSS */
h3[_ngcontent-pmm-6] {
  color: hotpink;
}

Dans ce cas-là, alors qu'on a écrit un sélecteur CSS très générique (h3), celui va sélectionner que les éléments qui se trouvent à l'intérieur de notre composant. Pour que ça fonctionne l'attribut "magique" _ngcontent-pmm-6 est unique à chaque instance du composant.

En effet, ça peut être très utile. Je trouve ça quand même très désagréable de voir mon code complètement réécrit. Mon temps de debug peut aussi être allongé, lorsque je n'arrive pas à comprendre pourquoi ça ne fonctionne pas. Et puisque j'applique pratiquement toujours la méthode BEM, cette fonctionnalité ne m'intéresse pas forcément.4

Pour la désactiver, il faut utiliser l'annotation encapsulation: ViewEncapsulation.None :

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

@Component({
  selector: "my-component",
  templateUrl: "./my-component.component.html",
  styleUrls: ["./my-component.component.scss"],
  encapsulation: ViewEncapsulation.None
})
export class MyComponent {}

Oui… Il faut donc le faire sur chaque composant !

Source : la documentation d'Angular.