Qu'est-ce que View Encapsulation dans Angular ?

Question

Accepted Answer

**View Encapsulation** contrôle la manière dont le CSS d'un composant est délimité — par défaut, Angular **isole les styles de chaque composant** pour qu'ils ne s'échappent pas et ne soient pas affectés par d'autres composants. Cela résout le problème de portée globale du CSS. ## Pourquoi c'est important ```ts @Component({ selector: "app-card", template: `

Title

`, styles: [`h2 { color: blue; }`], // ONLY affects this component's

// encapsulation: ViewEncapsulation.Emulated (the default — no need to specify) }) export class CardComponent {} ``` Avec le mode `Emulated` par défaut, ce `h2 { color: blue }` n'affectera pas les `

` des autres composants, et les styles externes ne s'infiltreront pas dans celui-ci. ## Comment Emulated fonctionne en interne ```html
Title
``` Angular ajoute automatiquement des attributs uniques `_ngcontent`/`_nghost` aux éléments du composant et réécrit ses sélecteurs CSS pour correspondre uniquement à ceux-ci — émulant les styles délimités sans avoir besoin du Shadow DOM natif. ## Les trois modes ```text ViewEncapsulation.Emulated (default) → scoped via added attributes (works everywhere) ViewEncapsulation.ShadowDom → real browser Shadow DOM (true isolation) ViewEncapsulation.None → NO scoping — styles are global (leak everywhere) ``` ## Briser l'encapsulation si nécessaire ```css /* style a child component's internals from the parent / :host { display: block; } / the component's own host element / :host(.active) { ... } / host with a class / ::ng-deep .child-class { color: red; } / pierce into children (use sparingly — deprecated-ish) */ ``` `:host` stylise l'élément racine du composant lui-même ; `::ng-deep` force un style à travers les descendants (puissant mais déconseillé — cela casse l'encapsulation). ## Pourquoi c'est important View Encapsulation est la raison pour laquelle les composants Angular sont sûrs à styliser en isolation — vous pouvez écrire `h2 { color: blue }` dans un composant sans craindre de casser tous les `

` de l'application. Comprendre le mode `Emulated` par défaut (et les alternatives `None`/`ShadowDom`, plus `:host` et `::ng-deep` pour les exceptions intentionnelles) est important pour gérer les styles dans les grandes applications et pour construire des bibliothèques de composants où la fuite de styles serait un problème sérieux.