bug: ssr <slot />s can be incorrectly resolved during client-side 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

if sibling <slot /> elements change from server to client render, vdom resolution can fail.

example:

import { Build, Component, Host, h } from '@stencil/core';

@Component({
  tag: 'incorrect-slot-hydrate',
  shadow: true,
})
export class MyApp {
  render() {
    return (
      <Host>
        <div>
          <slot name="slot-1" />
          <slot />
          {Build.isBrowser && <slot name="client-side-slot" />}
        </div>
      </Host>
    );
  }
}

After client hydrate:

...
  <slot name="slot-1"></slot>
  <slot name="slot-1"></slot>
  <slot name="client-side-slot"></slot>
...

^ the default slot is replaced with an incorrect duplicate of the first slot

Expected Behavior

Slots from server render should be correctly resolved during client-side hydration. In this case, the default slot should not be removed.

System Info

Steps to Reproduce

https://stackblitz.com/edit/stencil-start-1wfms9fy?file=src%2Fcomponents%2Fincorrect-slot-hydrate.tsx

Click on 'incorrect-slot-hydrate'

There should be slotted text 'Default slot content' but the default slot has been removed / given a 'name' so the text does not render.

Code Reproduction URL

https://stackblitz.com/edit/stencil-start-1wfms9fy?file=src%2Fcomponents%2Fincorrect-slot-hydrate.tsx

Additional Information

[christian-bromann]

This has been released in @stencil/[email protected]