title: Styling child elements using global CSS in Angular 2
body: <p>I'm starting to use Angular 2 and I am using an admin template from Themeforest for styling. I want my component to take the styles defined on the index.html, which should be global. The problem is that the elements inside a components html file are not finding these styles, and I think that it is because somehow the parent-child relationship is broken. Here's an example:</p>
  
  <p>In the index.html file, I have the following:</p>
  
  <pre><code>...
  &lt;!-- This is my Component --&gt;
  &lt;sidebar-menu&gt;&lt;/sidebar-menu&gt;
  
  &lt;!-- This is coded directly on the index.html --&gt;
  &lt;li class="m-t-30"&gt;
      &lt;a href="#" class="detailed"&gt;
          &lt;span class="title"&gt;Page 1&lt;/span&gt;
          &lt;span class="details"&gt;234 notifications&lt;/span&gt;
      &lt;/a&gt;
      &lt;span class="icon-thumbnail "&gt;&lt;i class="pg-mail"&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;/li&gt;
  ...
  </code></pre>
  
  <p>My <code>&lt;sidebar-menu&gt;</code> component has this on it's .html file:</p>
  
  <pre><code>&lt;li class="m-t-30"&gt;
    &lt;a href="#" class="detailed"&gt;
      &lt;span class="title"&gt;Page 1&lt;/span&gt;
      &lt;span class="details"&gt;234 notifications&lt;/span&gt;
    &lt;/a&gt;
    &lt;span class="icon-thumbnail "&gt;&lt;i class="pg-mail"&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Which is exactly the same as what is present on the index.html file. So, I should see the two items displayed in the same way. But this is what I see:</p>
  
  <p><a href="https://i.stack.imgur.com/AG61P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AG61P.png" alt="enter image description here"></a></p>
  
  <p>Clearly, the styling is broken, even though that both the component's html and the element's html are the same. Using the inspector, I can see that the component's html is not using the same styling as the second element:</p>
  
  <p>Component's inspected title:
  <a href="https://i.stack.imgur.com/yO5KQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yO5KQ.png" alt="Component&#39;s inspected title"></a></p>
  
  <p>Second element's inspected title:
  <a href="https://i.stack.imgur.com/1wRuA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1wRuA.png" alt="enter image description here"></a></p>
  
  <p>I tried defining <code>encapsulation: ViewEncapsulation.None</code> on my Component, but it doesn't do anything. Any ideas on how to solve this? Thanks!</p>