title: Apply CSS Style inside ng-content
body: <p>in an Angular application I have a component with <code>&lt;ng-content&gt;&lt;/ng-content&gt;</code>. I added the scss rules for content that will be put inside the ng-content, but they are ignored. I tried to solve using <code>:host</code>, but it doesn't work.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-ewqhzj" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ewqhzj</a></p>
  
  <p>Wrapper component:</p>
  
  <pre><code>&lt;app-embed&gt;
     &lt;p&gt;Hello world!&lt;/p&gt;&lt;h1 class="toBeColored"&gt;toBeColored&lt;/h1&gt;
  &lt;/app-embed&gt;
  </code></pre>
  
  <p>Styles in embed component:</p>
  
  <pre><code>:host {
    border: 5px solid red;
   padding: 15px;
   display: block;
   .toBeColored {
     color: pink;
   }
  }
  </code></pre>
  
  <p>The problem is that the pink color of 'toBeColored' string is not set</p>