Angular - 5.9-Comprendre l'encapsulation des vues

Les dernières vidéos de notre application en cours de développement ont montré un changement survenant lorsque des serveurs ou des blueprints étaient ajoutés. Plus précisément, un nouveau serveur en bas du blueprint ainsi que le paragraphe en haut n'avaient plus de couleur bleue. Avant, ils étaient colorés en bleu car nous avions défini dans le fichier app.component.css que les paragraphes devaient avoir une couleur de texte bleue.

Cependant, les deux paragraphes ont été déplacés et ne font plus partie de notre app.component. Le premier paragraphe fait partie du cockpit et le deuxième paragraphe est à l'intérieur de notre server élément. Pourtant, dans cette définition CSS, nous avions simplement mis "paragraphe", donc cela devrait affecter tous les paragraphes de notre application.

La raison de ce comportement est due à Angular, qui impose cette encapsulation de style. Bien que ces fichiers CSS aient pour but d'encapsuler les styles pour le composant auquel ils appartiennent, cela n'est pas un comportement par défaut. Angular ajoute des attributs étranges à chaque élément d'un composant, comme _ngcontent-ejo-2, pour assurer que les styles que nous définissons dans un fichier CSS ne s'appliquent qu'au composant auquel ils appartiennent.

Angular émule ainsi le shadow DOM, qui est une technologie non prise en charge par tous les navigateurs, où chaque élément a son propre shadow DOM derrière lui où vous pourriez alors assigner des styles à chaque élément. Le comportement par défaut de l'encapsulation de vue dans Angular est donc ainsi.