title: Use CSS selectors like :first-child inside shadow dom
body: <p>Is there any way to use css selectors like :first-child, :not(:last-child) inside of the shadow dom?</p>
  
  <p>The example is like this</p>
  
  <p>CustomElement.html</p>
  
  <pre><code>&lt;div id="parent-div&gt;
   &lt;slot&gt;&lt;/slot&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>App.html</p>
  
  <pre><code>&lt;div&gt;
   &lt;custom-element&gt;
     &lt;div class="heading"&gt;Main Heading&lt;/div&gt;
     &lt;div class="item"&gt;item 1&lt;/div&gt;
     &lt;div class="item"&gt;item 1&lt;/div&gt;
     &lt;div class="item"&gt;item 1&lt;/div&gt;
     &lt;div class="heading"&gt;Second Heading&lt;/div&gt;
     &lt;div class="item"&gt;item 1&lt;/div&gt;
     &lt;div class="item"&gt;item 1&lt;/div&gt;
     &lt;div class="item"&gt;item 1&lt;/div&gt;
   &lt;/custom-element&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>what i want to do is find out the first .heading element and add custom styles to it. Since <code>&lt;div class=heading"&gt;</code> is actually a component, i can't add custom styling to it thinking only as the first heading.</p>
  
  <p>P.S.:-  I'm using angular-elements, if it helps</p>