Issue 1:
I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

If a component uses ViewEncapsulation.None then those styles are never removed from the DOM after the user navigates to a different route. For example if component Foo styles the <p> tag with a red background, and then the user navigates to a different route, all <p> tags on the next page will have a red background.

Expected behavior

Styles should not outlive the component that defines them. A <p> tag should look the same, no matter what the routing history is.

Minimal reproduction of the problem with instructions

Create 2 routes "Foo" and "Bar".

Configure the main component for Foo so that it uses ViewEncapsulation.None.

Create a <p> elements in both the Foo and Bar components.

In the component for Foo, create a style p { background-color: #F00; }.

In the main application component create some routerLinks to allow navigation between the Foo and Bar routes.

Run the application

Click on the link for "Foo". Note the red background on the <p> element. This is expected.

Click on the link for "Bar". Note that the <p> element is red. This is NOT expected.

Refresh the page.

Click on the link for "Bar". Note that this time the <p> element is not red.

Navigate to "Foo" then go back to "Bar". The <p> element is now red again. This is NOT expected.

Plnker

Plnker

In the plunker, click on the "Foo" link first.

Then click on the "Bar" link. Note the red <p> tag. This is NOT expected.

Refresh the page, click on the "Foo" link. Note the red <p> tag. This is expected.

Click on the "Bar" link. Then click on "Foo" again. Note the red <p> tag. This is NOT expected.

What is the motivation / use case for changing the behavior?

For every page/component that is rendered into the <router-outlet>, I will configure it so that it uses ViewEncapsulation.None. This allows me define semi-global styles for individual pages. So for example if I want all <input> tags to have 200px width only on page Foo, I can just set the style in the FooComponent stylesheet.

I shouldn't have to worry that styles on page Foo can bleed over into page Bar. Worse is that this effect is entirely dependent on the exact order that the user navigates around the application. For any non-trivially sized application, this represents an unreasonable testing burden. For the moment I have decided that it's best that I don't use the angular router when navigating between "feature pages" and fallback to conventional <a> links.

Please tell us about your environment:

Windows 10. Angular CLI and Notepad++, npm

Angular version: 2.0.X

Angular 4.1.1. This may impact older versions, but I wouldn't have seen it until today because I normally don't navigate between feature pages in my application without performing a full page load. I just happened to forget to do it this one time.

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome, Firefox, Edge. Haven't tested others.

Language: [all | TypeScript X.X | ES6/7 | ES5]

TypeScript

Node (for AoT issues): node --version =

Issue 2:
I'm submitting a ... (check one with "x")

[ X ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Given a component with encapsulation set to none, if no instances exist on the page (such as *ngIf="false"), its styles are not applied to the page. Once it does exist (that *ngIf becomes true), its styles are applied to the whole page. All of this is as expected.

However, if this *ngIf is set back to false, these styles continue to be applied to the page.

Expected behavior

If at least one instance of this component exists on a page, its styles should be applied to the page. If no instances of this component exist on a page, its styles should not be applied to the page (or should be removed if previously applied).

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/WEOWO8vl3UyoqlutoB35?p=preview

What is the motivation / use case for changing the behavior?

This could be used for a component to override surrounding styles (which it shouldn't be doing if it doesn't exist on the page) or for easy conditional restyling of a page (maybe running an experiment?).

Please tell us about your environment:

Linux. I just wrote this in Plunker.

Angular version: 2.4.5

Browser: I am using Chrome Version 55.0.2883.105 (64-bit), but I suspect this applies to all browsers.

Language: TypeScript 2.0.2