javascript - StencilJS 渲染嵌套组件

Question

我创建了两个嵌套在一起的 Web 组件。我面临的主要问题是当我尝试渲染子组件时，来自父组件的所有内容都会重叠。我认为问题在于父组件和子组件都在渲染<slot/>。如您所见，父组件呈现<slot></slot>. 并且子组件也通过那里的名称呈现它的每个插槽，我发现的唯一“解决方案”是shadow:true在子元素中将 shadow 设置为 true()，这样只<slot/>显示子元素并且它不会重叠由家长。但这对我不起作用，因为在我的子组件中我想渲染另一个组件，但由于这是影子 DOM，它不显示任何内容。有什么想法吗，谢谢。

<parent-component>
  <child-component>
    <div slot='title'>title</div>
    <div slot='subtitle'>subtitle</div>
  </child-component>
</parent-component>

@Component({
  tag: 'child-component'
  shadow: false
})
export class ChildComponent{

  //my-logic

  render(){
    return(
      <div>
        <slot name='title'/>
        <slot name='subtitle'/>
        <external-component></external-component>
      </div>
    )}
  }
}

@Component({
  tag: 'parent-component'
  shadow: false
})
export class ParentComponent{

  //my-logic

  render(){
    return(
      <div>
        <slot></slot>
      </div>
    )}
  }
}