<!DOCTYPE html>
<html>
<body>
  <my-element-outer></my-element-outer>
  <script>
    class MyElementInner extends HTMLElement {
      connectedCallback() {
        const sr = this.attachShadow({mode: 'open'})
        sr.innerHTML = `
          <slot name="named"></slot>
          <div>
            <slot></slot>
          </div>
          `;
      }
    }

    customElements.define('my-element-inner', MyElementInner);

    class MyElementOuter extends HTMLElement {
      connectedCallback() {
        const sr = this.attachShadow({mode: 'open'})
        sr.innerHTML = `
          <my-element-inner>
            <slot>default</slot>
            <div slot="named">named slot<div>
          </my-element-inner>
        `;
      }
    }

    customElements.define('my-element-outer', MyElementOuter);
  </script>
</body>
</html>