title: _ngcontent-c0 being added to a css rule automatically
body: <p>I was following a drag and drop example in (you can find it here: <code>https://stackblitz.com/edit/draggable-part-6</code>)
  After implementing the code I tried to move the "box" into a component. </p>
  
  <pre><code>&lt;div class="box" appDroppable &gt;
    MyBox
    &lt;div class="box box-helper" *appDraggableHelper&gt;MyBox&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I noticed it doesn't render correctly. Looking at the chrome dev console I notices that when the element renders outside the box it has the following rule:</p>
  
  <p><a href="https://i.stack.imgur.com/ZfprZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZfprZ.png" alt="enter image description here"></a></p>
  
  <p>When inside the component, it renders the following way:</p>
  
  <p><a href="https://i.stack.imgur.com/ylG9Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ylG9Y.png" alt="enter image description here"></a></p>
  
  <p>summary, the "_ngcontent-c0" attribute in not in the html and consequently the rule doesn't apply anymore.</p>
  
  <p>the scss is defined the following way and does not contain any _ngcontent-c0</p>
  
  <pre><code>.box {
    background: #BADA55;
    border: 1px solid black;
    padding: 10px 20px;
    display: inline-block;
  
    &amp;.dragging {
      background: coral;
    }
  }
  </code></pre>
  
  <p>the question is, why is the _ngcontent-c0 being added to the rule dynamically?</p>