title: Styling default slot in webcomponents
body: <p>In webcomponents, we have two type of slots (named slots and default slots). We can easily style named slots by using syntax <code>slot[name]::slotted(*)</code>. But is there any way that we can style default slots because they don't have any name associated?</p>
  
  <p>The code is something like this and i'm using Angular Elements.</p>
  
  <pre><code>&lt;div class="topbar-item"&gt;
    &lt;slot class="icon" name="icon"&gt;&lt;/slot&gt;
    &lt;span class="text"&gt;
     &lt;slot&gt;&lt;/slot&gt; &lt;-- This is the slot i want to add styles, only if the slot has some data assigned. (need to add margin-left)
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>