Modes d’encapsulation de la vue
Comparez Emulated, None et ShadowDom.
Modes d’encapsulation de la vue est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Qu’est-ce que l’encapsulation de la vue ?
L’encapsulation de la vue contrôle la manière dont les styles d’un composant sont isolés du reste de la page. Angular propose trois modes via la propriété encapsulation.
Définir le mode
Définissez le mode avec l’énumération ViewEncapsulation dans le décorateur @Component.
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-card",
encapsulation: ViewEncapsulation.Emulated
})
export class CardComponent {}Émulé (par défaut)
Emulated est le mode par défaut. Angular simule des styles limités au composant en ajoutant des attributs uniques aux éléments et aux sélecteurs, sans utiliser le Shadow DOM natif.
@Component({
encapsulation: ViewEncapsulation.Emulated
})Fonctionnement du mode émulé
Le mode émulé réécrit les sélecteurs avec des attributs générés, ce qui fournit une limitation au composant dans tous les navigateurs, sans exiger la prise en charge du Shadow DOM.
/* you write */
.title { color: blue; }
/* angular emits */
.title[_ngcontent-xyz] { color: blue; }Aucun
None désactive complètement l’encapsulation. Les styles du composant deviennent globaux et peuvent affecter n’importe quel élément de la page.
@Component({
encapsulation: ViewEncapsulation.None,
styles: [".title { color: red; }"]
})
// .title now applies app-wideQuand utiliser None
Utilisez None avec parcimonie, par exemple pour définir des règles de thème partagées depuis un composant. Attention : les styles peuvent entrer en conflit à l’échelle globale.
ShadowDom
ShadowDom utilise le Shadow DOM natif du navigateur pour isoler véritablement le balisage et les styles du composant.
@Component({
selector: "app-widget",
encapsulation: ViewEncapsulation.ShadowDom
})
export class WidgetComponent {}Différences de ShadowDom
Avec ShadowDom, le composant est rendu dans une véritable racine d’ombre. Les styles globaux ne la traversent pas et les styles du composant ne s’en échappent pas, ce qui offre l’isolation la plus forte.
Comparaison des fuites de styles
Emulated empêche les fuites vers l’extérieur, mais les styles globaux peuvent toujours cibler les éléments ; None n’offre aucune isolation ; ShadowDom bloque complètement les deux directions.
Choisir un mode
Conservez Emulated dans presque tous les cas. Utilisez ShadowDom pour les widgets totalement isolés et None uniquement pour des styles globaux intentionnels.
Encapsulation et styles globaux
N’oubliez pas que la feuille de style globale styles.css s’applique toujours, quel que soit le mode, sauf à l’intérieur d’un composant ShadowDom, où les styles globaux n’atteignent pas le contenu.
Vérification rapide
Vérifiez votre compréhension des modes d’encapsulation de la vue.
Récapitulatif
Angular propose trois modes d’encapsulation : Emulated (par défaut, limitation simulée au composant), None (styles globaux) et ShadowDom (isolation native). Emulated convient à la plupart des cas ; ShadowDom offre l’isolation la plus forte.
Questions Fréquemment Posées
La leçon « Modes d’encapsulation de la vue » est-elle gratuite ?
Oui — le texte complet de « Modes d’encapsulation de la vue » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Modes d’encapsulation de la vue » ?
Comparez Emulated, None et ShadowDom. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Modes d’encapsulation de la vue » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Styles limités au composant
- Modes d’encapsulation de la vue
- Styles de l’hôte et du contexte de l’hôte
- Classes et styles dynamiques