title: Web components: How to work with children?
body: <p>I'm currently experimenting with StencilJS to create some web components.</p>
  
  <p>Now I know that there is <code>&lt;slot /&gt;</code> and named slots and all that stuff. Coming from React, I guess slot is similar to children in React. You can do a lot of stuff using children in React. Things I often did:</p>
  
  <ol>
  <li>Check if any children are provided</li>
  <li>Iterate over children to do something to each child (e.g. wrap it in a div with a class etc.)</li>
  </ol>
  
  <p>How would you do that using slot/web components/stencilJS?</p>
  
  <p>I can get the Host Element of my web component in Stencil using </p>
  
  <pre><code>@Element() hostElement: HTMLElement;
  </code></pre>
  
  <p>I use my component like</p>
  
  <pre><code>&lt;my-custom-component&gt;
    &lt;button&gt;1&lt;/button&gt;
    &lt;button&gt;2&lt;/button&gt;
    &lt;button&gt;3&lt;/button&gt;
  &lt;/my-custom-component&gt;
  </code></pre>
  
  <p>I want to render something like</p>
  
  <pre><code>render() {
    return slottedChildren ?
      &lt;span&gt;No Elements&lt;/span&gt; :
      &lt;ul class="my-custom-component"&gt;
        slottedChildren.map(child =&gt; &lt;li class="my-custom-element&gt;{child}&lt;/li&gt;)
      &lt;/ul&gt;;
  }
  </code></pre>
  
  <p>Kind regards</p>