bug: incorrect 'slot forwarding' when mixing shadow: true and scoped: true components during SSR hydration

[johnjenkins]

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

latest

Current Behavior

Given something like:

...
scoped: true,
...
<Host>
  Other stuff

  <shadow-true>
    <slot>Fallback content</slot>
  </shadow-true>

   More stuff
</Host>

• Nodes that should remain in the scoped: true component are moved to within the shadow: true component.
• The non-shadow slot fallback content remains showing, despite the slot being used

Expected Behavior

Slotted nodes should be forwarded correctly without affecting the rest of the scoped: true component.

System Info

No response

Steps to Reproduce

Open https://stackblitz.com/edit/stencil-start-ydmeww :

npm run build && npm run express

In the preview window, click on 'non-shadow-forwarded-slot'.

Notice slotted nodes are correctly forwarded, but other component internals are also, incorrectly forwarded.

Notice that the non-shadow <slot> fallback content remains showing despite the slot being used.

Code Reproduction URL

https://stackblitz.com/edit/stencil-start-ydmeww

Additional Information

[christian-bromann]

A fix for this was released in Stencil v4.23.0