bug: multiple of the same custom element - during ssr - will load the last element's property value for all

[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

During SSR, given a component:

@Component({
  tag: 'my-component',
  shadow: true,
})
export class MyApp {
  @Prop() aProp;

  render() {
    return <Host>My Prop: {this.aProp}</Host>;
  }
}

Used like:

  <my-component></my-component>
  <my-component a-prop="second-component"></my-component>

The outputted HTML will be something like:

<my-component class="hydrated" s-id="3">
...
My Prop: second-component
</my-component>

<my-component a-prop="second-component" class="hydrated" s-id="4">
...
My Prop: second-component
</my-component>

^^ the last set a-prop will be rendered in all components.

After the client script takes-over, the correct state will then be set.

Expected Behavior

Component should not 'share' their initial props in anyway.

System Info

Steps to Reproduce

https://stackblitz.com/edit/stencil-start-6at4nont?file=views%2Fmultiple-component.html,src%2Fcomponents%2Fmulti-component.tsx

Click on 'mulitple-component' < the client side script has intentionally not been included.

Code Reproduction URL

https://stackblitz.com/edit/stencil-start-6at4nont?file=views%2Fmultiple-component.html,src%2Fcomponents%2Fmulti-component.tsx

Additional Information

[christian-bromann]

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