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.
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:
<parent-component>
<child-component slot="child"></child-component>
</parent-component>
And here's the parent webcomponent HTML:
<div id="civ">
<style>
</style>
<slot id="slot1" name="child"></slot>
</div>
Since each webcomponent (parent and child) is written to be independent, I have been creating them with:
customElements.define('component-name', class extends HTMLElement {
constructor() {
super();
this.shadowRoot = this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `HTML markup`
}
})
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.
So, what is the right way to compose v1 nested webcomponents?