Styler l'élément racine

Par défaut, vous ne pouvez pas cibler l'élément racine de votre composant ou tout autre noeud en dehors de votre composant.

Pour pouvoir le faire, il vous faudra utiliser une syntaxe empruntée au shadow DOM des custom components : :host() et :host-context(). Ces sélecteurs ne seront pas présents dans votre feuille de styles finale, ils seront réécrits par la compilation Angular.

L'isolation des styles

L'encapsulation des styles dans Angular réécrit vos CSS pour s'assurer de l'isolation des styles. C'est ce qui vous empêche de cibler un élément en dehors de votre composant.

<!-- Quand j'écris le code suivant -->
<hero-details>
  <div class="container">
    <h3>Team</h3>
  </div>
</hero-detail>

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

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

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

Si vous voulez vous en passer, c'est aussi possible de désactiver l'encapsulation de styles d'Angular.

:host()

Pour cibler l'élément racine, vous serez obligé d'utiliser le pseudo-sélecteur :host().

Par exemple :

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

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

Petite astuce à garder en tête aussi, les custom components sont par défaut des éléments inline !

:host-context()

Autre sélecteur à connaître, la pseudo-classe :host-context() permet de cibler un élément en amont de votre composant.

Par exemple :

/* Quand j'écris le code suivant */
:host-context(.theme-pink) h3 {
  color: hotpink;
}

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

Source : la documentation d'Angular.