fix(ssr): multiple component instances sharing initial properties (#6126

)

Co-authored-by: John Jenkins <john.jenkins@nanoporetech.com>

src/hydrate/platform/proxy-host-element.ts

@@ -108,8 +108,9 @@ export function proxyHostElement(elm: d.HostElement, cstr: d.ComponentConstructo
 
             // if we have a parsed value from an attribute / or userland prop use that first.
             // otherwise if we have a getter already applied, use that.
-            return attrPropVal !== undefined
-              ? attrPropVal
+            const ref = getHostRef(this);
+            return ref.$instanceValues$?.get(memberName) !== undefined
+              ? ref.$instanceValues$?.get(memberName)
               : origGetter
                 ? origGetter.apply(this)
                 : getValue(this, memberName);

test/end-to-end/src/ssr-runtime-decorators/ssr-runtime-decorators.e2e.ts

@@ -107,4 +107,34 @@ describe('different types of decorated properties and states render on both serv
     expect(await txt('basicState')).toBe('basicState');
     expect(await txt('decoratedState')).toBe('10');
   });
+
+  it('renders different values on different component instances ', async () => {
+    const doc = await renderToString(`
+      <runtime-decorators></runtime-decorators>
+      <runtime-decorators 
+        decorated-prop="200"
+        decorated-getter-setter-prop="-5"
+        basic-prop="basicProp via attribute"
+        basic-state="basicState via attribute"
+        decorated-state="decoratedState via attribute"
+      ></runtime-decorators>
+    `);
+    html = doc.html;
+
+    // first component should have default values
+
+    expect(htmlTxt('basicProp')).toBe('basicProp');
+    expect(htmlTxt('decoratedProp')).toBe('-5');
+    expect(htmlTxt('decoratedGetterSetterProp')).toBe('999');
+    expect(htmlTxt('basicState')).toBe('basicState');
+    expect(htmlTxt('decoratedState')).toBe('10');
+
+    page = await newE2EPage({ html, url: 'https://stencil.com' });
+
+    expect(await txt('basicProp')).toBe('basicProp');
+    expect(await txt('decoratedProp')).toBe('-5');
+    expect(await txt('decoratedGetterSetterProp')).toBe('999');
+    expect(await txt('basicState')).toBe('basicState');
+    expect(await txt('decoratedState')).toBe('10');
+  });
 });