You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You can also choose to write your styles in separate files:
17
+
18
+
<docs-codelanguage="angular-ts"highlight="[4]">
19
+
@Component({
20
+
selector: 'profile-photo',
21
+
templateUrl: 'profile-photo.html',
22
+
styleUrl: 'profile-photo.css',
23
+
})
24
+
export class ProfilePhoto { }
25
+
</docs-code>
26
+
27
+
When Angular compiles your component, these styles are emitted with your component's JavaScript
28
+
output. This means that component styles participate in the JavaScript module system. When you
29
+
render an Angular component, the framework automatically includes its associated styles, even when
30
+
lazy-loading a component.
31
+
32
+
Angular works with any tool that outputs CSS,
33
+
including [Sass](https://sass-lang.com), [less](https://lesscss.org),
34
+
and [stylus](https://stylus-lang.com).
35
+
36
+
## Style scoping
37
+
38
+
Every component has a **view encapsulation** setting that determines how the framework scopes a
39
+
component's styles. There are three view encapsulation modes: `Emulated`, `ShadowDom`, and `None`.
40
+
You can specify the mode in the `@Component` decorator:
41
+
42
+
<docs-codelanguage="angular-ts"highlight="[3]">
43
+
@Component({
44
+
...,
45
+
encapsulation: ViewEncapsulation.None,
46
+
})
47
+
export class ProfilePhoto { }
48
+
</docs-code>
49
+
50
+
### ViewEncapsulation.Emulated
51
+
52
+
By default, Angular uses emulated encapsulation so that a component's styles only apply to elements
53
+
defined in that component's template. In this mode, the framework generates a unique HTML attribute
54
+
for each component instance, adds that attribute to elements in the component's template, and
55
+
inserts that attribute into the CSS selectors defined in your component's styles.
56
+
57
+
This mode ensures that a component's styles do not leak out and affect other components. However,
58
+
global styles defined outside of a component may still affect elements inside a component with
59
+
emulated encapsulation.
60
+
61
+
In emulated mode, Angular supports
62
+
the [`:host`](https://developer.mozilla.org/docs/Web/CSS/:host)
63
+
and [`:host-context()`](https://developer.mozilla.org/docs/Web/CSS/:host-context) pseudo
64
+
classes without
65
+
using [Shadow DOM](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM).
66
+
During compilation, the framework transforms these pseudo classes into attributes so it doesn't
67
+
comply with these native pseudo classes' rules at runtime (e.g. browser compatibility, specificity). Angular's
68
+
emulated encapsulation mode does not support any other pseudo classes related to Shadow DOM, such
69
+
as `::shadow` or `::part`.
70
+
71
+
#### `::ng-deep`
72
+
73
+
Angular's emulated encapsulation mode supports a custom pseudo class, `::ng-deep`. Applying this
74
+
pseudo class to a CSS rule disables encapsulation for that rule, effectively turning it into a
75
+
global style. **The Angular team strongly discourages new use of `::ng-deep`**. These APIs remain
76
+
exclusively for backwards compatibility.
77
+
78
+
### ViewEncapsulation.ShadowDom
79
+
80
+
This mode scopes styles within a component by
81
+
using [the web standard Shadow DOM API](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM).
82
+
When enabling this mode, Angular attaches a shadow root to the component's host element and renders
83
+
the component's template and styles into the corresponding shadow tree.
84
+
85
+
This mode strictly guarantees that _only_ that component's styles apply to elements in the
86
+
component's template. Global styles cannot affect elements in a shadow tree and styles inside the
87
+
shadow tree cannot affect elements outside of that shadow tree.
88
+
89
+
Enabling `ShadowDom` encapsulation, however, impacts more than style scoping. Rendering the
90
+
component in a shadow tree affects event propagation, interaction
91
+
with [the `<slot>` API](https://developer.mozilla.org/docs/Web/Web_Components/Using_templates_and_slots),
92
+
and how browser developer tools show elements. Always understand the full implications of using
93
+
Shadow DOM in your application before enabling this option.
94
+
95
+
### ViewEncapsulation.None
96
+
97
+
This mode disables all style encapsulation for the component. Any styles associated with the
98
+
component behave as global styles.
99
+
100
+
NOTE: In `Emulated` and `ShadowDom` modes, Angular doesn't 100% guarantee that your component's styles will always override styles coming from outside it.
101
+
It is assumed that these styles have the same specificity as your component's styles in case of collision.
102
+
103
+
## Defining styles in templates
104
+
105
+
You can use the `<style>` element in a component's template to define additional styles. The
106
+
component's view encapsulation mode applies to styles defined this way.
107
+
108
+
Angular does not support bindings inside of style elements.
109
+
110
+
## Referencing external style files
111
+
112
+
Component templates can
113
+
use [the `<link>` element](https://developer.mozilla.org/docs/Web/HTML/Element/link) to
114
+
reference CSS files. Additionally, your CSS may
115
+
use [the `@import`at-rule](https://developer.mozilla.org/docs/Web/CSS/@import) to reference
116
+
CSS files. Angular treats these references as _external_ styles. External styles are not affected by
sin usar [Shadow DOM](https://developer.mozilla.org/es/docs/Web/API/Web_components/Using_shadow_DOM).
65
+
Durante la compilación, el framework transforma estas pseudo-clases en atributos para que no
66
+
cumpla con las reglas de estas pseudo-clases nativas en tiempo de ejecución
67
+
(ej. compatibilidad del navegador, especificidad).
68
+
El modo de encapsulación emulada de Angular no admite ninguna otra pseudo-clase relacionada con Shadow DOM,
69
+
como`::shadow`o`::part`.
70
70
71
71
#### `::ng-deep`
72
72
73
-
Angular's emulated encapsulation mode supports a custom pseudo class, `::ng-deep`. Applying this
74
-
pseudo class to a CSS rule disables encapsulation for that rule, effectively turning it into a
75
-
global style. **The Angular team strongly discourages new use of`::ng-deep`**. These APIs remain
76
-
exclusively for backwards compatibility.
73
+
El modo de encapsulación emulada de Angular admite una pseudo-clase personalizada, `::ng-deep`. Aplicar esta pseudo-clase a
74
+
una regla CSS deshabilita la encapsulación para esa regla, convirtiéndola efectivamente en un estilo global.
75
+
**El equipo de Angular desaconseja fuertemente el uso nuevo de`::ng-deep`**. Estas APIs permanecen exclusivamente para
76
+
compatibilidad hacia atrás.
77
77
78
78
### ViewEncapsulation.ShadowDom
79
79
80
-
This mode scopes styles within a component by
81
-
using [the web standard Shadow DOM API](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM).
82
-
When enabling this mode, Angular attaches a shadow root to the component's host element and renders
83
-
the component's template and styles into the corresponding shadow tree.
80
+
Este modo delimita el alcance de los estilos dentro de un componente
81
+
usando [la API estándar web de Shadow DOM](https://developer.mozilla.org/es/docs/Web/API/Web_components/Using_shadow_DOM).
82
+
Al habilitar este modo, Angular adjunta un shadow root (raíz de sombra) al elemento host del componente
83
+
y renderiza la plantilla y los estilos del componente en el árbol de sombra (shadow tree) correspondiente.
84
84
85
-
This mode strictly guarantees that _only_ that component's styles apply to elements in the
86
-
component's template. Global styles cannot affect elements in a shadow tree and styles inside the
87
-
shadow tree cannot affect elements outside of that shadow tree.
85
+
Este modo garantiza estrictamente que _solo_ los estilos de ese componente se apliquen a elementos en la
86
+
plantilla del componente. Los estilos globales no pueden afectar a elementos en un árbol de sombra y los estilos dentro del
87
+
árbol de sombra no pueden afectar a elementos fuera de ese árbol de sombra.
88
88
89
-
Enabling `ShadowDom` encapsulation, however, impacts more than style scoping. Rendering the
90
-
component in a shadow tree affects event propagation, interaction
91
-
with [the `<slot>` API](https://developer.mozilla.org/docs/Web/Web_Components/Using_templates_and_slots),
92
-
and how browser developer tools show elements. Always understand the full implications of using
93
-
Shadow DOM in your application before enabling this option.
89
+
Habilitar la encapsulación `ShadowDom`, sin embargo, impacta más que el alcance de estilos. Renderizar el
90
+
componente en un árbol de sombra afecta la propagación de eventos, la interacción
91
+
con [la API `<slot>`](https://developer.mozilla.org/es/docs/Web/API/Web_components/Using_templates_and_slots),
92
+
y cómo las herramientas de desarrollador del navegador muestran elementos. Siempre entiende las implicaciones completas de usar
93
+
Shadow DOM en tu aplicación antes de habilitar esta opción.
94
94
95
95
### ViewEncapsulation.None
96
96
97
-
This mode disables all style encapsulation for the component. Any styles associated with the
98
-
component behave as global styles.
97
+
Este modo deshabilita toda la encapsulación de estilos para el componente. Cualquier estilo asociado con el
98
+
componente se comporta como estilos globales.
99
99
100
-
NOTE: In `Emulated`and`ShadowDom` modes, Angular doesn't 100% guarantee that your component's styles will always override styles coming from outside it.
101
-
It is assumed that these styles have the same specificity as your component's styles in case of collision.
100
+
NOTA: En los modos `Emulated`y`ShadowDom`, Angular no garantiza al 100% que los estilos de tu componente siempre sobrescriban los estilos que vienen de fuera.
101
+
Se asume que estos estilos tienen la misma especificidad que los estilos de tu componente en caso de colisión.
102
102
103
-
## Defining styles in templates
103
+
## Definir estilos en plantillas
104
104
105
-
You can use the`<style>`element in a component's template to define additional styles. The
106
-
component's view encapsulation mode applies to styles defined this way.
105
+
Puedes usar el elemento`<style>`en la plantilla de un componente para definir estilos adicionales. El
106
+
modo de encapsulación de vista del componente se aplica a los estilos definidos de esta manera.
107
107
108
-
Angular does not support bindings inside of style elements.
108
+
Angular no admite enlaces dentro de elementos de estilo.
109
109
110
-
## Referencing external style files
110
+
## Referenciar archivos de estilo externos
111
111
112
-
Component templates can
113
-
use [the `<link>` element](https://developer.mozilla.org/docs/Web/HTML/Element/link)to
114
-
reference CSS files. Additionally, your CSS may
115
-
use [the `@import`at-rule](https://developer.mozilla.org/docs/Web/CSS/@import)to reference
116
-
CSS files. Angular treats these references as _external_ styles. External styles are not affected by
0 commit comments