Comprendre la ` ViewEncapsulation` en Angular

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