¿Qué es View Encapsulation en Angular?

Question

Accepted Answer

**View Encapsulation** controla cómo se limita el CSS de un componente — de forma predeterminada, Angular **aísla los estilos de cada componente** para que no se filtren a otros componentes ni se vean afectados por ellos. Esto resuelve el problema del alcance global de CSS. ## El predeterminado: 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 {} ``` Con el modo `Emulated` predeterminado, ese `h2 { color: blue }` no afectará a los `

` en otros componentes, y los estilos externos no se filtrarán en este. ## Cómo funciona Emulated bajo el capó ```html
Title
``` Angular agrega automáticamente atributos `_ngcontent`/`_nghost` únicos a los elementos del componente y reescribe sus selectores CSS para que coincidan solo con ellos — emulando estilos limitados sin necesidad de Shadow DOM nativo. ## Los tres modos ```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) ``` ## Penetración de encapsulation cuando sea necesario ```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` aplica estilo al elemento raíz propio del componente; `::ng-deep` fuerza un estilo a través de los descendientes (poderoso pero desaconsejado — rompe la encapsulation). ## Por qué es importante View Encapsulation es la razón por la que los componentes Angular son seguros para aplicar estilos de forma aislada — puedes escribir `h2 { color: blue }` en un componente sin preocuparte de estropear cada `

` en la aplicación. Comprender el modo `Emulated` predeterminado (y las alternativas `None`/`ShadowDom`, además de `:host` y `::ng-deep` para excepciones intencionales) es importante para gestionar estilos en aplicaciones grandes y para crear bibliotecas de componentes donde la fuga de estilos sería un problema grave.