title: How can I colorize an element with css through the shadow dom?
body: <p>I have a component called <em>accordion-next</em>. This component can be see as a template. I have a component called <em>accordion-toto</em>. This second component is using <em>accordion-next</em>. it is a kind of a filler for the template.</p>
  
  <p>if <em>accordion-next</em> was an interpolated string it would be:</p>
  
  <pre><code>`&lt;a href&gt;${content}&lt;/a&gt;`
  </code></pre>
  
  <p>and <em>accordion-toto</em> would be:</p>
  
  <pre><code>content = "&lt;div&gt;&lt;div&gt;&lt;span class="caret"&gt;▼&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;"
  </code></pre>
  
  <p>so <em>accordion-toto</em> will print</p>
  
  <pre><code>&lt;a href&gt;&lt;div&gt;&lt;div&gt;&lt;span class="caret"&gt;▼&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
  </code></pre>
  
  <p>ok. Now, I want to add some scss to <em>accordion-toto</em>. This scss is</p>
  
  <pre><code>a:hover .caret,
  {
      color: red;
  }
  </code></pre>
  
  <p>Of course it doesnt work. I try to use <code>:host</code>, <code>:host-context</code>, <code>:host(:hover)</code>, <code>:host-context(:hover)</code> then <code>/deep/</code> and a mixed of all of this. What case did I missed?</p>
  
  <p>You can see the following Stackblitz for a complete example:</p>
  
  <p><a href="https://stackblitz.com/edit/angular-nwhzog-7z8pzp" rel="nofollow noreferrer">Stackblitz complete demo</a></p>
  
  <p>Relate to: <a href="https://stackoverflow.com/q/50741268/1248177">How to edit a ng-template to use my HTML?</a></p>
  
  <p>Edit: I use to have rotate issue. Thank you @Shadowlauch for pointing it. My problem is still here with a 'basic' attribute.</p>