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

1. Create 2 routes "Foo" and "Bar".
2. Configure the main component for Foo so that it uses ViewEncapsulation.None.
3. Create a <p> elements in both the Foo and Bar components.
4. In the component for Foo, create a style p { background-color: #F00; }.
5. In the main application component create some routerLinks to allow navigation between the Foo and Bar routes.
6. Run the application
7. Click on the link for "Foo". Note the red background on the <p> element. This is expected.
8. Click on the link for "Bar". Note that the <p> element is red. This is NOT expected.
9. Refresh the page.
10. Click on the link for "Bar". Note that this time the <p> element is not red.
11. Navigate to "Foo" then go back to "Bar". The <p> element is now red again. This is NOT expected.

Plnker

1. Plnker
2. In the plunker, click on the "Foo" link first.
3. Then click on the "Bar" link. Note the red <p> tag. This is NOT expected.
4. Refresh the page, click on the "Foo" link. Note the red <p> tag. This is expected.
5. 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 =