StencilJS Rendering nested componentes

Question

I have created two web components that are nested together. The main problem that I am facing is when I try to render the child component, everything from the parent gets overlapped. I think that the issue is that both parent component and child component are rendering <slot/>. As you can see the parent component renders <slot></slot>. And the child component renders each of its slots by there name as well, the only "solution" that I found is to set shadow to true(shadow:true) in the child element, that way only the child <slot/> is shown and it doesn't get overlapped by the parent. But that is not working for me because inside my child component I would like to render another component, but since this is shadow DOM it does not show anything. Any ideas?, thanks.

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