javascript - StencilJS ネストされたコンポーネントのレンダリング

Question

ネストされた 2 つの Web コンポーネントを作成しました。私が直面している主な問題は、子コンポーネントをレンダリングしようとすると、親からのすべてがオーバーラップすることです。問題は、親コンポーネントと子コンポーネントの両方がレンダリングされていることだと思います<slot/>。ご覧のとおり、親コンポーネント renders <slot></slot>. そして、子コンポーネントはその名前で各スロットもレンダリングします。私が見つけた唯一の「解決策」はshadow:true、子要素でシャドウを 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>
    )}
  }
}