Modos de encapsulación de vistas
Compare Emulated, None y ShadowDom.
Modos de encapsulación de vistas es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué es la encapsulación de vistas?
La encapsulación de vistas controla cómo se aíslan los estilos de un componente del resto de la página. Angular ofrece tres modos mediante la propiedad encapsulation.
Configuración del modo
Establezca el modo con la enumeración ViewEncapsulation en el decorador @Component.
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-card",
encapsulation: ViewEncapsulation.Emulated
})
export class CardComponent {}Emulated (predeterminado)
Emulated es el modo predeterminado. Angular simula los estilos con ámbito añadiendo atributos únicos a los elementos y selectores, sin usar Shadow DOM nativo.
@Component({
encapsulation: ViewEncapsulation.Emulated
})Cómo funciona Emulated
El modo Emulated reescribe los selectores con atributos generados, lo que proporciona un ámbito compatible con todos los navegadores sin exigir compatibilidad con Shadow DOM.
/* you write */
.title { color: blue; }
/* angular emits */
.title[_ngcontent-xyz] { color: blue; }None
None desactiva por completo la encapsulación. Los estilos del componente se vuelven globales y pueden afectar a cualquier elemento de la página.
@Component({
encapsulation: ViewEncapsulation.None,
styles: [".title { color: red; }"]
})
// .title now applies app-wideCuándo usar None
Use None con moderación, por ejemplo, para definir reglas de tema compartidas desde un componente. Tenga en cuenta que los estilos pueden entrar en conflicto globalmente.
ShadowDom
ShadowDom usa el Shadow DOM nativo del navegador para aislar realmente el marcado y los estilos del componente.
@Component({
selector: "app-widget",
encapsulation: ViewEncapsulation.ShadowDom
})
export class WidgetComponent {}En qué se diferencia ShadowDom
Con ShadowDom, el componente se representa dentro de una raíz shadow real. Los estilos globales no pueden penetrar en ella y los estilos del componente no se filtran hacia fuera, lo que proporciona el mayor nivel de aislamiento.
Comparación del filtrado de estilos
Emulated evita el filtrado hacia fuera, pero los estilos globales aún pueden seleccionar elementos; None no ofrece aislamiento; ShadowDom bloquea completamente ambas direcciones.
Elección del modo
Use Emulated en casi todos los casos. Use ShadowDom para widgets completamente aislados y None únicamente para estilos globales intencionados.
Encapsulación y estilos globales
Recuerde que la hoja de estilos global styles.css siempre se aplica, independientemente del modo, excepto dentro de un componente ShadowDom, donde los estilos globales no llegan.
Comprobación rápida
Compruebe su comprensión de los modos de encapsulación de vistas.
Resumen
Angular ofrece tres modos de encapsulación: Emulated (predeterminado, con ámbito simulado), None (estilos globales) y ShadowDom (aislamiento nativo). Emulated es adecuado para la mayoría de los casos; ShadowDom proporciona el mayor nivel de aislamiento.
Preguntas frecuentes
¿La lección «Modos de encapsulación de vistas» es gratis?
Sí — el texto completo de «Modos de encapsulación de vistas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Modos de encapsulación de vistas»?
Compare Emulated, None y ShadowDom. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Modos de encapsulación de vistas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Estilos con ámbito de componente
- Modos de encapsulación de vistas
- Estilos del host y de Host-Context
- Clases y estilos dinámicos