Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature: Add possibility to change ViewEncapsulation mode #7

Open
frederikschubert opened this issue Dec 18, 2015 · 0 comments
Open

Feature: Add possibility to change ViewEncapsulation mode #7

frederikschubert opened this issue Dec 18, 2015 · 0 comments

Comments

@frederikschubert
Copy link

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 <head></head> section. So when we reload the component the styles are added again but are not removed. This then looks something like this:

<style>*[_ngcontent-bil-9] {
        color:red;
}</style>
<style>*[_ngcontent-bil-44] {
    color:red;
}</style>

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@frederikschubert