Angular - 5.10-En savoir plus sur l'encapsulation des vues

Dans la leçon précédente, nous avons vu comment Angular isole le CSS d'un composant. Ce comportement peut être désactivé ou changé via la propriété encapsulation du décorateur @Component. Il faut d'abord importer l'enum ViewEncapsulation depuis @angular/core, puis lui passer une des trois valeurs disponibles.

Les trois modes disponibles

• ViewEncapsulation.Emulated : c'est le mode par défaut, celui qui ajoute les attributs _ngcontent-... pour simuler le shadow DOM ;
• ViewEncapsulation.None : aucune encapsulation. Le CSS du composant devient global. Si on définit dans le CSS de ServerElementComponent que les label sont rouges, ce style affectera tous les label de l'application, y compris ceux d'autres composants ;
• ViewEncapsulation.ShadowDom : utilise le shadow DOM natif du navigateur. Donne un résultat équivalent à Emulated, mais uniquement dans les navigateurs qui prennent en charge cette technologie.

Exemple d'utilisation dans le décorateur :

@Component({
  selector: 'app-server-element',
  templateUrl: './server-element.component.html',
  styleUrls: ['./server-element.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class ServerElementComponent { }

Le mode None peut occasionnellement être pratique pour publier des styles globaux depuis un composant, mais dans la majorité des cas Emulated reste le meilleur choix — c'est lui qui offre la portabilité maximale entre navigateurs et garantit qu'un composant ne pollue pas les autres. L'essentiel est de savoir que ce comportement par défaut peut être modifié au besoin.