mgechev / mgechev/angular2-hot-loader
Feature: Add possibility to change ViewEncapsulation mode
- Dominant language
- TypeScript
- Stars
- 113
- Forks
- 8
- PR merge metrics
- No merged PRs in 30d
Description
When adding the `encapsulation` property to the `ComponentMetadata` (for example with `ViewEncapsulation.None` the styles are reloaded correctly. However when changing the mode after that the styles don't change. ~~I think this can be fixed in `updateMetadata(component)` but I am not sure why the current approach doesn't work.~~
This one is actually caused by Angular and I am not sure i this can be solved. When Angular discovers a component with `encapsulation` set to `Emulated` or `None` it appends the styles of the component as styles to the `` section. So when we reload the component the styles are added again but are not removed. This then looks something like this:
``` html
*[_ngcontent-bil-9] {
color:red;
}
*[_ngcontent-bil-44] {
color:red;
}
```
Because Angular discovers the style-tag that has already been set, it changes the selector that emulates the shadow DOM in some random way.
I don't know if it would be too much of an effort to implement this feature, but maybe I haven`t fully understood the problem so I am leaving this issue up. This is not an important feature, just something that came to my mind when playing around with the hot-loader.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by tracing the mentioned updateMetadata(component) path and how Angular handles component styles in the document head when encapsulation is Emulated or None. Determine whether changing the ComponentMetadata encapsulation can remove or replace previously added style tags. Done means switching modes no longer leaves duplicate styles or inconsistent emulated selectors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100