Angular: A qué se refieren con view encapsulation
May 16, 2022
Table of contents
Quick Access
Uno de los frameworks más utilizados en los últimos años para construir la parte frontend de una aplicación o sitio web es Angular. Así lo definen en su página web oficial “Angular es una plataforma de desarrollo, construida en TypeScript”.
Como plataforma, Angular incluye:
- Un marco basado en componentes para crear aplicaciones web escalables
- Una colección de bibliotecas bien integradas que cubren una amplia variedad de funciones, incluido el enrutamiento, la gestión de formularios, la comunicación cliente-servidor y más
- Un conjunto de herramientas de desarrollo para ayudarlo a desarrollar, compilar, probar y actualizar su código
Angular es popular entre las grandes compañías
Angular brinda a una empresa la posibilidad de tener un sitio web escalable con un nuevo diseño. Para una empresa de software, utilizar este framework tiene varios beneficios y usos, entre los que se encuentran: crear foros, portales de negocios, plataformas de crowdfunding, mercados, listados de propiedades, etc.
Entre las empresas que han hecho uso de este framework para sus páginas y aplicaciones se encuentran: GitHub (foro), Google, Forbes, Indiegogo, BMW (calculadora de precios, buscador de ofertas), portal para desarrolladores de Deutsche Bank, Crunchbase, Nike, Xbox, Udacity, YoutubeTV, Firebase, AT&T y Adobe.
¿Qué es view encapsulation en Angular?
Angular ofrece a sus usuarios varios componentes que hacen del desarrollo una tarea fácil y rápida, entre estos destaca en view encapsulation, o vista encapsulada según su traducción al español, sobre esta explican en la página del framework.
Allí nos dicen “En Angular, los estilos de un componente se pueden encapsular dentro del elemento host del componente para que no afecten al resto de la aplicación. El decorador del componente proporciona la opción de encapsulación que se puede usar para controlar cómo se aplica la encapsulación por componente”.
El desarrollador puede escoger de entre los siguientes modos:
- ShadowDom: Angular usa la API Shadow DOM integrada del navegador para encerrar la vista del componente dentro de un ShadowRoot (usado como elemento host del componente) y aplicar los estilos provistos de manera aislada.
- Emulated: Angular modifica los selectores de CSS del componente para que solo se apliquen a la vista del componente y no afecten a otros elementos de la aplicación (emula el comportamiento de Shadow DOM).
- None: Angular no aplica ningún tipo de encapsulación de vista, lo que significa que cualquier estilo especificado para el componente se aplica globalmente y puede afectar cualquier elemento HTML presente dentro de la aplicación. Este modo es esencialmente el mismo que incluir los estilos en el propio HTML.
Ejemplo de cada modo de encapsulación en Angular
None
El siguiente ejemplo muestra un elemento que contiene ViewEncapsulation.None
@Component({
selector: 'app-no-encapsulation',
template: `
<h2>None</h2>
<div class="none-message">No encapsulation</div>
`,
styles: ['h2, .none-message { color: red; }'],
encapsulation: ViewEncapsulation.None,
})
export class NoEncapsulationComponent { }
Emulated
El siguiente ejemplo, muestra un elemento que contiene el componente ViewEncapsulation.Emulated
@Component({
selector: 'app-emulated-encapsulation',
template: `
<h2>Emulated</h2>
<div class="emulated-message">Emulated encapsulation</div>
<app-no-encapsulation></app-no-encapsulation>
`,
styles: ['h2, .emulated-message { color: green; }'],
encapsulation: ViewEncapsulation.Emulated,
})
export class EmulatedEncapsulationComponent { }
Similar a ViewEncapsulation.None, Angular agrega los estilos para este componente al <head> del documento, pero con estilos de "ámbito".
Por lo tanto, solo los elementos directamente dentro de la plantilla de este componente coincidirán con sus estilos. Dado que los estilos de "ámbito" de EmulatedEncapsulationComponent son muy específicos, anulan los estilos globales de NoEncapsulationComponent.
ShadowDom
Ahora, veamos un ejemplo de componente que contiene ViewEncapsulation.ShadowDom
@Component({
selector: 'app-shadow-dom-encapsulation',
template: `
<h2>ShadowDom</h2>
<div class="shadow-message">Shadow DOM encapsulation</div>
<app-emulated-encapsulation></app-emulated-encapsulation>
<app-no-encapsulation></app-no-encapsulation>
`,
styles: ['h2, .shadow-message { color: blue; }'],
encapsulation: ViewEncapsulation.ShadowDom,
})
export class ShadowDomEncapsulationComponent { }
En la página de Angular explican “en este ejemplo, ShadowDomEncapsulationComponent contiene tanto NoEncapsulationComponent como EmulatedEncapsulationComponent”.
Nuestros developer en Rootstack han utilizado Angular para diseñar aplicaciones dinámicas y enfocadas a la buena experiencia del usuario al momento de interactuar con ellas, pudiendo así dar solución a los problemas técnicos de nuestros clientes internacionales.
Te recomendamos en video
Related Blogs
¿Cómo usar data science para mejorar los resultados de una empresa?
Machine Learning en Recursos Humanos
Características del Machine Learning
Data Science vs Data Analytics
Ventajas de realizar tareas con Inteligencia Artificial
