如何将包含slot的Shadow DOM子元素移出所属Web Component并保留插槽功能

结论 #

无法直接通过原生API实现，插槽和所属自定义元素的Shadow Root是强绑定的，必须手动处理插槽内容的迁移才能保证显示正常。

问题根因 #

插槽的分配规则是固定的：每个<slot>元素的宿主，是它所在的Shadow Root对应的自定义元素，它只会从这个宿主元素的直接子元素中匹配对应slot属性的内容。
你的示例中，name="inside"的<slot>是写在<a-parent>的Shadow Root内的，它只会匹配<a-parent>直接子节点中带slot="inside"的元素。当你把包含这个slot的<a-child>从<a-parent>的Shadow DOM中移动到body后，这个slot就脱离了原有的Shadow Root，原有匹配关系自动解除，自然不会再显示对应的内容。

可行解决方案 #

最简单的处理方式是移动元素时，手动把对应的插槽内容也一起迁移到被移出的元素内，修改你的move方法即可：

move() {
    const child = this.shadowRoot.getElementById('child')
    // 找到对应inside插槽的内容节点
    const insideContent = this.querySelector('[slot="inside"]')
    // 将内容追加到a-child内，a-child的Shadow Root内有默认slot，会自动渲染这部分内容
    if (insideContent) child.append(insideContent)
    document.body.append(child)
}

如果你需要保留原插槽内容在<a-parent>里的副本，把append换成append(insideContent.cloneNode(true))即可。

内容的提问来源于stack exchange，提问作者Felipe Sierra