<p dir="auto"><strong>Steps to reproduce and a minimal demo of the problem</strong></p>
<ul dir="auto">
<li>Create sibling components in the "component tree" (have a parent component that has multiple components within its template) and give each one of them at least one CSS class in the <code class="notranslate">styles</code> or <code class="notranslate">styleUrls</code> component metadata property.</li>
<li>Set one of those sibling components <code class="notranslate">encapsulation</code> component metadata property to <code class="notranslate">ViewEncapsulation.Native</code></li>
<li>Make sure the other sibling components are not set to <code class="notranslate">ViewEncapsulation.Native</code> mode.</li>
<li>Run the code in <strong>Chrome</strong> since it has Shadow DOM support.</li>
<li>Inspect the DOM in the browser, expand the #shadow-root for the component that is set to <code class="notranslate">ViewEncapsulation.Native</code> mode.</li>
<li>Notice that the <em>styles</em> from the other sibling components are ending up inside of the shadow dom for the component that is set to <code class="notranslate">ViewEncapsulation.Native</code>:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1243236/14227993/2595ca40-f8be-11e5-874a-f1519de4f726.png"><img src="https://cloud.githubusercontent.com/assets/1243236/14227993/2595ca40-f8be-11e5-874a-f1519de4f726.png" alt="image" style="max-width: 100%;"></a></li>
<li>Also notice that the <em>styles</em> from the other sibling components are still ending up in the <code class="notranslate">head</code> tag as expected:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1243236/14228026/e02d8348-f8be-11e5-8f41-798fe3fedf47.png"><img src="https://cloud.githubusercontent.com/assets/1243236/14228026/e02d8348-f8be-11e5-8f41-798fe3fedf47.png" alt="image" style="max-width: 100%;"></a></li>
</ul>
<p dir="auto">Here is an <a href="http://plnkr.co/edit/CbARDYM1kL3duyo4JZpz?p=preview" rel="nofollow">example on Plunker</a></p>
<p dir="auto"><strong>Current behavior</strong><br>
Looks like the CSS shim that is getting created into a <code class="notranslate">&lt;style&gt;</code> tag is getting inserted into sibling components in the component tree that are in <code class="notranslate">ViewEncapsulation.Native</code> mode. It also looks like they are put in there in the same order that the custom elements are found within the parent component template markup. So if two non-native mode sibling components are processed in the DOM tree before the native mode one, their <code class="notranslate">&lt;style&gt;</code> tags will come before the native one and the native one's markup in the shadow DOM:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1243236/14228051/7a0a9690-f8bf-11e5-84b5-9c2982c75981.png"><img src="https://cloud.githubusercontent.com/assets/1243236/14228051/7a0a9690-f8bf-11e5-84b5-9c2982c75981.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
I believe that this is not the desired behavior and that those other sibling component styles should not be ending up in the Shadow DOM of the native mode component.</p>
<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>