Cuándo y por qué deberíamos usar View Encapsulation en angular

Este dilema se puede abordar de diversas formas, pero te compartimos la resolución más completa para nosotros.

Solución:

Codecraft.TV tiene un artículo increíble sobre ViewEncapsulation que puede consultar para obtener una mejor comprensión.

Para resumirlo:

ViewEncapsulation.Emulated: Angular cambia nuestro selector de clase css genérico a uno que apunta a un solo tipo de componente mediante el uso generado automáticamente attributes.

Los estilos que definimos en un componente no se filtran al resto de la aplicación, pero con ViewEncapsulation.Emulated nuestro componente aún hereda estilos globales.

---

ViewEncapsulation.Native: si queremos que Angular use el shadow DOM, podemos configurar el parámetro de encapsulación para usar ViewEncapsulation.Native

Con ViewEncapsulation.Native los estilos que establecemos en un componente no se filtran fuera del alcance de los componentes.

Esto es genial si estamos definiendo un componente de terceros que queremos que la gente use de forma aislada. Podemos describir el aspecto de nuestro componente utilizando estilos css sin temor a que nuestros estilos se filtren y afecten al resto de la aplicación.

Sin embargo con ViewEncapsulation.Native nuestro componente también está aislado de los estilos globales que hemos definido para nuestra aplicación. Por lo tanto, no heredamos los estilos globales y tenemos que definir todos los estilos requeridos en nuestro decorador de componentes.

Finalmente ViewEncapsulation.Native requiere una característica llamada shadow DOM que no es compatible con todos los navegadores.

---

ViewEncapsulation.None: Si no queremos tener ninguna encapsulación, podemos usar ViewEncapsulation.None.

Si no encapsulamos nada, el estilo que definimos en el componente se filtrará y comenzará a afectar a los demás componentes.

Algunos otros recursos que quizás desee consultar:

1. VER ENCAPSULACIÓN EN ANGULAR – Por Thoughtram
2. Ver encapsulación por Rangle.IO
3. Alcance de sus estilos en Angular con ViewEncapsulationView
4. Diferencia entre ViewEncapsulation.Native, ViewEncapsulation.None y ViewEncapsulation.Emulated

---

---

Utiliza Nuestro Buscador