title: How to determine number of children in a slot
body: <p>Is there anyway to know how many children a named slot contains?  In my Stencil component I have something like this in my render function:  </p>
  
  <pre><code>&lt;div class="content"&gt;
    &lt;slot name="content"&gt;&lt;/slot&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to do is style the div.content differently depending on how many children are inside the slot.  If there are no children in the slot, then div.content's style.display='none', otherwise, I have a bunch of styles applied to div.content that make the children appear correctly on the screen.</p>
  
  <p>I tried doing:</p>
  
  <pre><code>  const divEl = root.querySelector( 'div.content' );
    if( divEl instanceof HTMLElement ) {
      const slotEl = divEl.firstElementChild;
      const hasChildren = slotEl &amp;&amp; slotEl.childElementCount &gt; 0;
      if( !hasChildren ) {
        divEl.style.display = 'none';
      }
    }
  </code></pre>
  
  <p>however this is always reporting hasChildren = false even when I have items inserted into the slot.</p>