Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.0.0 (also seen in 3.4.0)

Current Behavior

I'm not sure exactly what the problem is here, but basically I have a component with this structure:

@Component({
  tag: 'non-shadow-host',
  shadow: false,
})
export class NonShadowHost {
  render() {
    return (
      <div>
        <drop-down>
          <slot name="main-content" slot="main-content" />
          <div slot="dropdown-content-element">
            <drop-down-content>
              <slot name="dropdown-content" />
            </drop-down-content>
          </div>
        </drop-down>
      </div>
    );
  }
}

(the name drop-down is meaningless, I stripped out all code related to that). If I set shadow: true, this works, if I remove it, the slotted content in "dropdown-content" doesn't render. In the following screenshot, the selected node should get slotted but doesn't, and doesn't show up in the rendered HTML.

I made a copy of this component, changed the name for shadow-host and set shadow to true, and now it renders as expected.

I'm not sure if I'm trying to do something unsupported here, but I didn't see any warnings in the documentation about interop between shadow and non-shadow components.

Expected Behavior

I would expect both components to end up rendering the same thing on screen.

System Info

No response

Steps to Reproduce

Clone the linked repo
yarn && yarn start
Check out example 2 labeled Missing slotted content bug in index.html.

Code Reproduction URL

https://github.com/asik/stencil-repro

Additional Information

No response