Angular - 5.9-Comprendre l'encapsulation des vues

En faisant évoluer notre application, on remarque un effet de bord intéressant. Lorsque nous avons déplacé des paragraphes hors de AppComponent — un dans CockpitComponent, l'autre dans ServerElementComponent — ils ne sont plus colorés en bleu, alors que app.component.css contient pourtant une règle p { color: blue; } qui semblerait viser tous les paragraphes de l'application.

Comment Angular isole les styles

La raison de ce comportement est l'encapsulation de vue imposée par Angular. Par défaut, Angular fait en sorte que le CSS déclaré pour un composant ne s'applique qu'à ce composant, et nulle part ailleurs. Pour y parvenir, le framework ajoute à l'exécution des attributs uniques sur chaque élément, du type _ngcontent-ejo-2, puis réécrit les sélecteurs CSS pour qu'ils ciblent uniquement ces attributs. Si on inspecte le DOM dans les outils de développement, on les voit clairement apparaître sur chaque balise.

• chaque composant reçoit un identifiant unique à la compilation ;
• tous ses éléments DOM portent un attribut _ngcontent-... reflétant cet identifiant ;
• les règles CSS du composant sont automatiquement préfixées pour ne matcher que ces attributs ;
• conséquence : un p { color: blue; } dans app.component.css n'affecte que les paragraphes appartenant directement à AppComponent.

Angular émule ainsi le shadow DOM, une technologie native qui n'est pas encore prise en charge par tous les navigateurs et qui isole nativement les styles d'un composant. C'est le comportement par défaut de l'encapsulation de vue Angular. Dans la prochaine leçon, nous verrons les autres modes d'encapsulation disponibles si l'on souhaite changer ce comportement.