title: How do I reference host element in CSS of an Angular2 component?
body: <p>I have a component in Angular2 and I want to set the padding on the host element.</p>
  
  <pre><code>@Component({
      selector: 'my-app',
      template: 'Hello world'
      styles: ['my-app {padding: 10px}']
  })
  </code></pre>
  
  <p>in browser, my style looks like this:</p>
  
  <pre><code>my-app[_ngcontent-icu-3] {padding: 10px;}
  </code></pre>
  
  <p>while my host element looks like this:</p>
  
  <pre><code>&lt;my-app _ngcontent-icu-1="" _nghost-icu-3=""&gt;
      &lt;div class="content" _ngcontent-icu-3=""&gt;&lt;/div&gt;
  &lt;/my-app&gt;
  </code></pre>
  
  <p>As I understand it, Angular2 adds these <code>_ng</code> attributes so CSS references specific components.</p>
  
  <p>But how do I reference the host element from the CSS defined inside the component?</p>