<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>
Putting styles with a <code class="notranslate">/deep/</code> selector bleeds into sibling components.</p>
<p dir="auto">When I have a component on one route with a style of the following:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/deep/ app-my-header {
  header {
    background-color: yellow;
  }
}"><pre class="notranslate"><code class="notranslate">/deep/ app-my-header {
  header {
    background-color: yellow;
  }
}
</code></pre></div>
<p dir="auto">If I then navigate to another component (not a child component) the styles from the sibling route still persist on the <code class="notranslate">app-my-header</code>.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Styles should not bleed outside of their component even when using the <code class="notranslate">/deep/</code> selector.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="https://github.com/zackarychapple/ng-css-encapsulation">https://github.com/zackarychapple/ng-css-encapsulation</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
We have styles to a header that changes as we navigate through the application, this bleeding causes breaking changes across route events.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
OSX, IntelliJ, Node</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
verified in 2.3.1 and 2.4.1</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>
tested in Chrome</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
Typescript</p>
</li>
</ul>
<p dir="auto">When there are sibling components, one with ViewEncapsulation.Native and the other with ViewEncapsulation.None, the styles that any component stylings are being appended to the shadow root of the one component set to Native.</p>
<p dir="auto"><del>Plunker: <a href="http://plnkr.co/edit/huN8xe0S7xH5CUw4B2P6?p=preview" rel="nofollow">http://plnkr.co/edit/huN8xe0S7xH5CUw4B2P6?p=preview</a></del><br>
<strong>Updated Stackblitz</strong>: <a href="https://stackblitz.com/edit/angular-issue-5059?file=src/app/app.component.html" rel="nofollow">https://stackblitz.com/edit/angular-issue-5059?file=src/app/app.component.html</a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/79500/10874083/afa88d42-80e3-11e5-8f8e-ad09cd8414df.png"><img width="491" alt="screen shot 2015-11-01 at 9 58 03 pm" src="https://cloud.githubusercontent.com/assets/79500/10874083/afa88d42-80e3-11e5-8f8e-ad09cd8414df.png" style="max-width: 100%;"></a></p>
<p dir="auto">A component set to Native should not adopt the rest of the CSS rules from non-Native components. In the screenshot of the rendered DOM, the last three style elements are appended to the end of the shadow root, but they are actually declared in the other two components which are set to None and Emulated modes.</p>
<p dir="auto">If all three components are set to Native, then the rules are applied only to the local component, but when they are mixed the rules bleed over into Native (but don't bleed out of Native).</p>