title: angular style not applied on components (despite the use of host selectors)
body: <p>I have an issue with the styling of components in my angular projects. I can't get it to work basically. To explain my issue I created a new project using Angular CLI (CLI 6.0.8, angular 6.1.0). Right off the bate I create a new test component in which I declare the following things:</p>
  
  <pre><code>- - - - - - - - - - - - - 
  COMPONENT TEMPLATE FILE:
  - - - - - - - - - - - - - 
  
  &lt;div&gt;with div&lt;/div&gt;
  without div
  
  - - - - - - - - - - - - - 
  COMPONENT STYLE FILE:
  - - - - - - - - - - - - - 
  
  :host
  {
    background-color: blue;
  }
  </code></pre>
  
  <p>(no changes to the typescript declaration file)</p>
  
  <p>I include this component in the app template, and declare some styling for it in the app.css file too:</p>
  
  <pre><code>- - - - - - - - - - - - - 
  APP TEMPLATE FILE:
  - - - - - - - - - - - - - 
  
  &lt;app-test class='test'&gt;&lt;/app-test&gt;
  
  - - - - - - - - - - - - - 
  APP STYLE FILE:
  - - - - - - - - - - - - - 
  
  .test
  {
    background-color: red;
    width: 350px;
  }
  </code></pre>
  
  <p>This is the result I get: </p>
  
  <p><a href="https://i.stack.imgur.com/ybTmu.png" rel="noreferrer">IMAGE : style does not apply correctly (background color applies to the free text only)</a></p>
  
  <p><a href="https://i.stack.imgur.com/aNW42.png" rel="noreferrer">IMAGE : the width of the element is not updated and the element size is not shown as it usually is when using chrome</a></p>
  
  <p><a href="https://i.stack.imgur.com/Hf3rB.png" rel="noreferrer">IMAGE : usually element sizes are highlighted in blue when shown</a></p>
  
  <p>As shown in the images, the styling is not applied correctly, whether it is defined in the parent scope or in the component scope (using :host). Styles are updated but not shown. When I change the 'app-test' tag into a 'div' tag in the browser (using the debug tools > edit as HTML), it is displayed correctly:</p>
  
  <p><a href="https://i.stack.imgur.com/KM9JQ.png" rel="noreferrer">IMAGE : changing the angular component tag into a div tag sorts the issue</a></p>
  
  <p>I reckon it has something to do with the way angular displays the component since changing the tag to a DIV works. But I don't understand where this problem comes from. This issue appears on a newly created project using CLI, without configuration anything in the project config...</p>
  
  <p>Can anyone help me?</p>