mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
ee8b8f52aa
This change changes the priority order of static styling.
Current priority:
```
(least priority)
- Static
- Component
- Directives
- Template
- Dynamic Binding
- Component
- Map/Interpolation
- Property
- Directives
- Map/Interpolation
- Property
- Template
- Map/Interpolation
- Property
(highest priority)
```
The issue with the above priority is this use case:
```
<div style="color: red;" directive-which-sets-color-blue>
```
In the above case the directive will win and the resulting color will be `blue`. However a small change of adding interpolation to the example like so. (Style interpolation is coming in https://github.com/angular/angular/pull/34202)
```
<div style="color: red; width: {{exp}}px" directive-which-sets-color-blue>
```
Changes the priority from static binding to interpolated binding which means now the resulting color is `red`. It is very surprising that adding an unrelated interpolation and style can change the `color` which was not changed. To fix that we need to make sure that the static values are associated with priority of the source (directive or template) where they were declared. The new resulting priority is:
```
(least priority)
- Component
- Static
- Map/Interpolation
- Property
- Directives
- Static
- Map/Interpolation
- Property
- Template
- Static
- Map/Interpolation
- Property
(highest priority)
```
PR Close #34938
|
||
|---|---|---|
| .. | ||
| acceptance | ||
| animation | ||
| bundling | ||
| change_detection | ||
| debug | ||
| di | ||
| dom | ||
| i18n | ||
| linker | ||
| metadata | ||
| reflection | ||
| render3 | ||
| sanitization | ||
| strict_types | ||
| testability | ||
| util | ||
| view | ||
| zone | ||
| application_init_spec.ts | ||
| application_module_spec.ts | ||
| application_ref_integration_spec.ts | ||
| application_ref_spec.ts | ||
| BUILD.bazel | ||
| component_fixture_spec.ts | ||
| dev_mode_spec.ts | ||
| directive_lifecycle_integration_spec.ts | ||
| error_handler_spec.ts | ||
| event_emitter_spec.ts | ||
| fake_async_spec.ts | ||
| forward_ref_integration_spec.ts | ||
| spies.ts | ||
| test_bed_async_spec.ts | ||
| test_bed_spec.ts | ||
| testing_internal_spec.ts | ||
| util_spec.ts | ||