<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[X] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[X] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
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 <code class="notranslate">&lt;p&gt;</code> tag with a red background, and then the user navigates to a different route, all <code class="notranslate">&lt;p&gt;</code> tags on the next page will have a red background.</p>

<p dir="auto"><strong>Expected behavior</strong><br>
Styles should not outlive the component that defines them.  A <code class="notranslate">&lt;p&gt;</code> tag should look the same, no matter what the routing history is.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<ol dir="auto">
<li>Create 2 routes "Foo" and "Bar".</li>
<li>Configure the main component for Foo so that it uses ViewEncapsulation.None.</li>
<li>Create a <code class="notranslate">&lt;p&gt;</code> elements in both the Foo and Bar components.</li>
<li>In the component for Foo, create a style <code class="notranslate">p { background-color: #F00; }</code>.</li>
<li>In the main application component create some routerLinks to allow navigation between the Foo and Bar routes.</li>
<li>Run the application</li>
<li>Click on the link for "Foo".  Note the red background on the <code class="notranslate">&lt;p&gt;</code> element.  This is expected.</li>
<li>Click on the link for "Bar".  Note that the <code class="notranslate">&lt;p&gt;</code> element is red.  This is NOT expected.</li>
<li>Refresh the page.</li>
<li>Click on the link for "Bar".  Note that this time the <code class="notranslate">&lt;p&gt;</code> element is not red.</li>
<li>Navigate to "Foo" then go back to "Bar".  The <code class="notranslate">&lt;p&gt;</code> element is now red again.  This is NOT expected.</li>
</ol>
<p dir="auto"><strong>Plnker</strong></p>
<ol dir="auto">
<li><a href="http://plnkr.co/edit/nG8gSD4Xc492ceIGlAeC?p=preview" rel="nofollow">Plnker</a></li>
<li>In the plunker, click on the "Foo" link first.</li>
<li>Then click on the "Bar" link.  Note the red <code class="notranslate">&lt;p&gt;</code> tag.  This is NOT expected.</li>
<li>Refresh the page, click on the "Foo" link.  Note the red <code class="notranslate">&lt;p&gt;</code> tag.  This is expected.</li>
<li>Click on the "Bar" link.  Then click on "Foo" again.  Note the red <code class="notranslate">&lt;p&gt;</code> tag.  This is NOT expected.</li>
</ol>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
For every page/component that is rendered into the <code class="notranslate">&lt;router-outlet&gt;</code>, 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 <code class="notranslate">&lt;input&gt;</code> tags to have 200px width only on page Foo, I can just set the style in the FooComponent stylesheet.</p>
<p dir="auto">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 <code class="notranslate">&lt;a&gt;</code> links.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows 10. Angular CLI and Notepad++, npm</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
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.</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [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 ]<br>
Chrome, Firefox, Edge.  Haven't tested others.</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
TypeScript</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ X ] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ X ] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">Given a component with <code class="notranslate">encapsulation</code> set to <code class="notranslate">none</code>, if no instances exist on the page (such as <code class="notranslate">*ngIf="false"</code>), its styles are not applied to the page. Once it does exist (that <code class="notranslate">*ngIf</code> becomes true), its styles are applied to the whole page. All of this is as expected.</p>
<p dir="auto">However, if this <code class="notranslate">*ngIf</code> is set back to false, these styles continue to be applied to the page.</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">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).</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto"><a href="http://plnkr.co/edit/WEOWO8vl3UyoqlutoB35?p=preview" rel="nofollow">http://plnkr.co/edit/WEOWO8vl3UyoqlutoB35?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">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?).</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<p dir="auto">Linux. I just wrote this in Plunker.</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.4.5</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> I am using Chrome Version 55.0.2883.105 (64-bit), but I suspect this applies to all browsers.</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript 2.0.2</p>
</li>
</ul>