<p dir="auto"><strong>Steps to reproduce and a minimal demo of the problem</strong></p>
<p dir="auto"><a href="http://plnkr.co/edit/QcbOZCLEMxDqB9Hal0ef?p=preview" rel="nofollow">http://plnkr.co/edit/QcbOZCLEMxDqB9Hal0ef?p=preview</a></p>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">Just press <code class="notranslate">a</code> in the search field to get a list of options and then press down key. The selected result is constantly reset. Selecting one will keep the single result open.</p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">Here's a version of the plunkr without <code class="notranslate">angular2-polyfills.js</code> to show the difference.</p>
<p dir="auto"><a href="http://plnkr.co/edit/FIygVljA8bIWaoAFehDr?p=preview" rel="nofollow">http://plnkr.co/edit/FIygVljA8bIWaoAFehDr?p=preview</a></p>
<p dir="auto">Any insights in why just including <code class="notranslate">angular2-polyfills.js</code> causes this inwanted change would be great. At first I thought it was an issue which could be solved by <code class="notranslate">ngZone.runOutsideAngular</code> but that was before I narrowed it down to simply including <code class="notranslate">angular2-polyfills.js</code></p>
<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"><code class="notranslate">:host(selector):before</code> rules are rewritten to <code class="notranslate">selector:before[_nghost_xyz_1]</code>, which never matches anything.<br>
Note that <code class="notranslate">:host:before</code> without a selector was fixed in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="181841790" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/12171" data-hovercard-type="pull_request" data-hovercard-url="/angular/angular/pull/12171/hovercard" href="https://github.com/angular/angular/pull/12171">#12171</a> (issue <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="181788444" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/12165" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/12165/hovercard" href="https://github.com/angular/angular/issues/12165">#12165</a>), it is now rewritten to <code class="notranslate">[_nghost_xyz_1]:before</code>.</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto"><code class="notranslate">:host(.foo):before</code> should match the <code class="notranslate">:before</code> of <code class="notranslate">:host</code> if it matches <code class="notranslate">.foo</code>. <a href="https://plnkr.co/edit/vItv5x9qrKikoj0f2wkN?p=preview" rel="nofollow">This plunkr</a> contains a working example in native ShadowDOM.</p>
<p dir="auto">In this case I'd expect the <code class="notranslate">:host(selector):before</code> rule to be rewritten to <code class="notranslate">selector[_nghost_xyz_1]:before</code>.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto">Use any <code class="notranslate">:host(selector):before</code> CSS selector. Example found <a href="https://plnkr.co/edit/id2szqWRmCOidI0c7q5a?p=preview" rel="nofollow">here</a> (slightly modified the plunkr <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/krassx/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/krassx">@krassx</a> posted in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="181788444" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/12165" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/12165/hovercard" href="https://github.com/angular/angular/issues/12165">#12165</a>)</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong></p>
<ul dir="auto">
<li>2.1.2</li>
<li>next (<code class="notranslate">npm i @angular/{common,compiler,core,forms,http,platform-browser,platform-browser-dynamic}@next</code>)</li>
</ul>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> all</p>
</li>
</ul>