Comprendre la ` ViewEncapsulation` en Angular

Play this article

La ViewEncapsulation est un concept présent en Angular que nous utilisons dans toutes nos applications mais nous n'y faisons pas toujours attention.

Ah bon ! đŸ˜Č
De quoi s'agit t-il ? đŸ€”

En effet, la ViewEncapsulation est la politique sur laquelle se base le framework Angular pour encapsuler le CSS présent dans nos composants. Il existe trois (03) types d'encapsulation CSS en Angular qui sont :

  • ViewEncapsulation.Emulated

  • ViewEncapsulation.None

  • ViewEncapsulation.ShadowDom

Avant d'aller plus loin, faisons un peu d'histoire 😂

Qu'est-ce que l'encapsulation d'un composant web ?

L'encapsulation d'un composant web permet à ce composant de garder la structure de balisage, le style et le comportement cachés et séparés du reste de code de la page afin que les différentes parties n'entrent pas en conflit et que le code puisse rester agréable et propre.

Comment se fait l'encapsulation ?

L'encapsulation se fait grĂące aux APIs du Shadow DOM !
Le Shadow DOM est une notion venant des standards des Web Components, qui permettent d’encapsuler des parties du DOM, ainsi que des styles. Cela veut dire qu’il est possible de limiter le champ d’action d’un script ou d’un style Ă  un Ă©lĂ©ment prĂ©cis. Il est alors possible d’appliquer des styles bien prĂ©cis Ă  un seul nƓud du DOM, sans que tout le reste de l’application soit impactĂ©.

En analogie avec un projet Angular, nous constatons que pour chaque composant créé, nous avons au minimum :

  • un template HTML

  • du style CSS

  • une classe TS

qui sont trois (03) Ă©lements propres Ă  ce composant.

Fin de l'histoire 😁

La ViewEncapsulation est donc implémentée en Angular pour faciliter le contÎle sur l'utilisation du Shadow DOM. Découvrons ensemble les trois (03) types d'encapsulation cités plus haut :

  • ViewEncapsulation.Emulated : il permet d'ajouter un attribut spĂ©cifique Ă  l'Ă©lĂ©ment hĂŽte du composant et en appliquant le mĂȘme attribut Ă  tous les sĂ©lecteurs CSS fournis via les styles ou les styleUrls. Ici, le Shadow DOM n'est pas utilisĂ©. C'est l'encapsulation par dĂ©faut de Angular.

Dans cet exemple, _ngcontent-bpa-c51 est l'attribut spécifique.


  • ViewEncapsulation.None : comme nous l'aurions devinĂ©, ce mode d'encapsulation ne fournit aucune sorte d'encapsulation de style CSS, ce qui signifie que tous les styles fournis via styles ou styleUrls sont applicables Ă  n'importe quel Ă©lĂ©ment HTML de l'application, quel que soit leur composant hĂŽte. Il n'y a toujours pas l'utilisation du Shadow DOM.

Il faut faire trĂšs attention avec ce type d'encapsulation, car vous aurez des conflits entre les styles CSS de vos composants.
En gros, tous vos styles seront des styles globaux Ă  votre application.


  • ViewEncapsulation.ShadowDom : comme son nom l'indique, ce type d'encapsulation utilise l'API Shadow DOM native du navigateur pour encapsuler les styles CSS, ce qui signifie qu'il crĂ©e un ShadowRoot pour l'Ă©lĂ©ment hĂŽte du composant, qui est ensuite utilisĂ© pour encapsuler tous les styles du composant.

Dans cet exemple, on voit clairement le ShadowRoot qui est créé.


En somme, faisons bien attention au type d'encapsulation que nous choisirons par rapport à nos besoins. Il faut garder à l'esprit que par défaut c'est ViewEncapsulation.Emulated qui est utilisé. Pour modifier le type d'encapsulation, il faut faire ceci par exemple :

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

@Component({
// ...
encapsulation: ViewEncapsulation.None,
})

export class HelloComponent {
// ...
}

Pour plus d'informations :
👉 ViewEncapsulation Api Core

👉 Component Encapsulation

👉Shadow DOM

Did you find this article valuable?

Support Ezéchiel Amen AGBLA by becoming a sponsor. Any amount is appreciated!