fix(lit-renderer): certain reactive props not init correctly (#1874)

* fix(lit-renderer): reactive props not init correctly

* test(renderer-lit): implement testing suggestiosn

* chore(renderer-lit): upload changeset

* fix(renderer-lit): call connCallback on server

* fix(renderer-lit): do not set reserved JSX props

* fix(renderer-lit): do not check for reserved attributes

Co-authored-by: Nate Moore <nate@skypack.dev>

1 files changed, 9 insertions, 1 deletions

diff --git a/packages/renderers/renderer-lit/server.js b/packages/renderers/renderer-lit/server.js
index c827f1ad1..e08b2bf9a 100644
--- a/packages/renderers/renderer-lit/server.js
+++ b/packages/renderers/renderer-lit/server.js
@@ -28,10 +28,18 @@ function* render(tagName, attrs, children) {
   const instance = new LitElementRenderer(tagName);
 
   // LitElementRenderer creates a new element instance, so copy over.
+  const Ctr = getCustomElementConstructor(tagName);
   for (let [name, value] of Object.entries(attrs)) {
-    instance.setAttribute(name, value);
+    // check if this is a reactive property
+    if (name in Ctr.prototype) {
+      instance.setProperty(name, value);
+    } else {
+      instance.setAttribute(name, value);
+    }
   }
 
+  instance.connectedCallback();
+
   yield `<${tagName}`;
   yield* instance.renderAttributes();
   yield `>`;