Was ist View Encapsulation in Angular?

Question

Accepted Answer

**View Encapsulation** steuert, wie das CSS einer Komponente begrenzt ist — standardmäßig **isoliert Angular die Stile jeder Komponente**, sodass sie nicht zu anderen Komponenten durchsickern oder von ihnen beeinflusst werden. Dies löst das Global-Scope-Problem von CSS. ## Warum es wichtig ist: Emulated Encapsulation ```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 {} ``` Im Standard-Modus `Emulated` beeinflusst dieses `h2 { color: blue }` nicht die `

`-Elemente in anderen Komponenten, und externe Stile sickern nicht in diese ein. ## Wie Emulated unter der Haube funktioniert ```html
Title
``` Angular fügt automatisch eindeutige `_ngcontent`/`_nghost`-Attribute zu den Elementen der Komponente hinzu und schreibt ihre CSS-Selektoren um, um nur diese zu treffen — emuliert Scoped Styles, ohne das native Shadow DOM zu benötigen. ## Die drei Modi ```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) ``` ## Encapsulation durchbrechen, wenn nötig ```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` formatiert das eigene Root-Element der Komponente; `::ng-deep` erzwingt einen Style zu Nachkommen (mächtig, aber nicht empfohlen — es bricht die Encapsulation). ## Warum es wichtig ist View Encapsulation ist der Grund, warum Angular-Komponenten sicher isoliert formatiert werden können — du kannst `h2 { color: blue }` in einer Komponente schreiben, ohne dir Sorgen zu machen, dass du jedes `

` in der App zerstörst. Das Verständnis des Standard-Modus `Emulated` (und der Alternativen `None`/`ShadowDom`, plus `:host` und `::ng-deep` für beabsichtigte Ausnahmen) ist wichtig für die Verwaltung von Styles in großen Apps und beim Erstellen von Komponentenbibliotheken, wo Style-Lecks ein ernstes Problem darstellen würden.