title: Angular :host <selector> is not working
body: <p>I want to style my component  if it has a class <strong>active</strong>. But it doesn't work.</p>
  
  <p><strong>thread.component.html</strong></p>
  
  <pre><code>&lt;div&gt;thread works!&lt;/div&gt;
  </code></pre>
  
  <p><strong>thread.component.css</strong></p>
  
  <pre><code>:host .active {
    display: block;
    border: 1px solid white;
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;app-thread class="active"&gt;&lt;/app-thread&gt;
  </code></pre>
  
  <p><hr>
  However, if I remove active class in app.comonent.html file and thread.component.css. <strong>It works perfectly fine.</strong></p>
  
  <p><strong>thread.component.html</strong></p>
  
  <pre><code>&lt;div&gt;thread works!&lt;/div&gt;
  </code></pre>
  
  <p><strong>thread.component.css</strong></p>
  
  <pre><code>:host {
    display: block;
    border: 1px solid white;
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;app-thread&gt;&lt;/app-thread&gt;
  </code></pre>