mgechev / mgechev/angular2-hot-loader

Feature: Add possibility to change ViewEncapsulation mode

Open
#7 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.