Composing v1 nested web components
<p>I'm new to webcomponents. Since v1 of webcomponents is available, I'm starting there. I have read various posts around the web about them. I'm particularly interested in composing them correctly. I have read about slots and have them working, although my efforts have not resulted in slotted webcomponents that work the way I expected.</p>
<p>If I have compose nested web components like this, the DOM from the nested/slotted webcomponent does not get inserted in the slot of the parent:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;parent-component&gt;
  &lt;child-component slot="child"&gt;&lt;/child-component&gt;
&lt;/parent-component&gt;</code></pre>
</div>
</div>
</p>
<p>And here's the parent webcomponent HTML:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="civ"&gt;
  &lt;style&gt;
  &lt;/style&gt;
  &lt;slot id="slot1" name="child"&gt;&lt;/slot&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>Since each webcomponent (parent and child) is written to be independent, I have been creating them with:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>customElements.define('component-name', class extends HTMLElement {
  constructor() {
    super();
    this.shadowRoot = this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `HTML markup`
  }
})</code></pre>
</div>
</div>
</p>
<p>The resulting DOM includes 2 shadow roots. I have attempted to write child/slotted elements without shadow dom, which also does not result in the parent shadow dom hosting the children.</p>
<p>So, what is the right way to compose v1 nested webcomponents?</p>