<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>
When <code class="notranslate">:host-context()</code> has a tag selector the style is not applied when selector matches. Class selector works fine.</p>
<p dir="auto">Example of working style: <code class="notranslate">:host-context(.test)</code></p>
<p dir="auto">Example of not working style: <code class="notranslate">:host-context(div)</code></p>
<p dir="auto"><strong>Expected behavior</strong><br>
Both styles should work</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
<a href="http://plnkr.co/edit/Rj9dEMO2QVb04b5Zr2zx" rel="nofollow">Plunk</a></p>
<p dir="auto"><strong>What happens</strong><br>
In the plunk above Angular generates the following CSS:</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="[_nghost-dbj-2]div   div[_ngcontent-dbj-2], div   [_nghost-dbj-2]   div[_ngcontent-dbj-2] {
      background-color: green;
}
[_nghost-dbj-2].test   div[_ngcontent-dbj-2], .test   [_nghost-dbj-2]   div[_ngcontent-dbj-2] {
      background-color: red;
}"><pre class="notranslate">[<span class="pl-c1">_nghost-dbj-2</span>]<span class="pl-c1">div</span>   <span class="pl-ent">div</span>[<span class="pl-c1">_ngcontent-dbj-2</span>]<span class="pl-kos">,</span> <span class="pl-ent">div</span>   [<span class="pl-c1">_nghost-dbj-2</span>]   <span class="pl-ent">div</span>[<span class="pl-c1">_ngcontent-dbj-2</span>] {
      <span class="pl-c1">background-color</span><span class="pl-kos">:</span> green;
}
[<span class="pl-c1">_nghost-dbj-2</span>].<span class="pl-c1">test</span>   <span class="pl-ent">div</span>[<span class="pl-c1">_ngcontent-dbj-2</span>]<span class="pl-kos">,</span> .<span class="pl-c1">test</span>   [<span class="pl-c1">_nghost-dbj-2</span>]   <span class="pl-ent">div</span>[<span class="pl-c1">_ngcontent-dbj-2</span>] {
      <span class="pl-c1">background-color</span><span class="pl-kos">:</span> red;
}</pre></div>
<p dir="auto">I assume that <code class="notranslate">[_nghost-dbj-2]div</code> is an invalid selector and browser discards the whole line so the style is never applied.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.1</li>
<li><strong>Browser:</strong> Chrome, Firefox</li>
<li><strong>Language:</strong> all</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
[ ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[X] bug report
[ ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
When using <code class="notranslate">this.ChangeDetectorRef.detach()</code> ...</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> ... changes doesn't update DOM</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ... changes trigger change detection for this ComponentRef</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ... changes trigger change detection for full application</li>
</ul>
<p dir="auto">At least this is reproducable for setTimeout, setInterval and Template-Events(like <code class="notranslate">(click)</code>)</p>
<p dir="auto"><strong>Expected behavior</strong><br>
<code class="notranslate">detach()</code> should not trigger change detection at all</p>
<p dir="auto">From the documentation: <code class="notranslate">Detaches the change detector from the change detector tree.</code> <code class="notranslate">This can also be used in combination with ChangeDetectorRef to implement local change detection checks.</code></p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
I rebuild the <a href="http://plnkr.co/edit/aUhZha?p=preview" rel="nofollow">2.0.0-alpha.37 Plunker</a> from the <a href="https://angular.io/docs/js/latest/api/core/index/ChangeDetectorRef-class.html" rel="nofollow">documentation</a> with latest Angular 2.4.x: <a href="https://plnkr.co/edit/UUaVgGESOo5wnJ2jQ1oJ?p=preview" rel="nofollow">https://plnkr.co/edit/UUaVgGESOo5wnJ2jQ1oJ?p=preview</a><br>
(Please see console)</p>
<p dir="auto"><strong>Angular version:</strong><br>
2.4.X</p>