StencilJS渲染嵌套组件

Question

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

<slot/>

<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>
    )}
  }
}