3.1. Angular et le Shadow DOM

Vous devez savoir que Angular n’utilise pas directement les spécifications du Shadow DOM que nous venons de voir.

QUOI ? On apprend des trucs qui ne servent à rien depuis le début ?!

Non, je ne vous ai pas exactement menti, disons que tout cela était nécessaire. 😏

Derrière les spécifications du Shadow DOM, vous avez déjà compris le mécanisme d’encapsulation sous-jacent. Et bien Angular utilise lui aussi son propre mécanisme d’encapsulation en interne, qui simule un comportement d’encapsulation, et qui a l’avantage de fonctionner sur tous les navigateurs, contrairement au Shadow DOM qui est assez récent et qui n’est pas supporté par les navigateurs plus anciens. Du coup, c’est bénéfique pour nous !

En fait, Angular peut quand même utiliser les spécifications du Shadow DOM si on le lui demande explicitement. Pour être exact, Angular propose trois techniques d’encapsulation des éléments personnalisés. Pour chacun de nos composants que nous créons avec Angular, nous avons le choix entre les systèmes d’encapsulation suivants :

• Emulated : C’est la méthode par défaut qu’utilise Angular, qui simule le fonctionnement du Shadow DOM mais qui a l’avantage de fonctionner sur tous les navigateurs. En interne, Angular simule le Shadow DOM en suffixant les sélecteurs utilisés pour cibler les composants. C’est cette méthode que nous utiliserons dans ce cours. Comme il s’agit de la méthode par défaut, le comportement de notre application sera le même sans ajouter de code particulier, Angular s’occupe de tout pour nous ! Elle n’est pas belle la vie ?
• Native : Cette méthode d’encapsulation supporte les spécifications du Shadow DOM, nous obtenons donc le même comportement d’encapsulation mais avec une portabilité moindre sur les anciens navigateurs.
• None : Pour une raison quelconque, vous pouvez vouloir ne pas utiliser le mécanisme d’encapsulation des vues, à vos risques et périls !