JSX + DSD + inferredObservability sandbox demo working

ProjectEvergreen · Jan 6, 2024 · 6c529b5 · 6c529b5
1 parent 9a6311c
commit 6c529b5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 12 deletions.
diff --git a/sandbox/index.html b/sandbox/index.html
@@ -71,13 +71,13 @@ <h2>JSX + Light DOM (no JS)</h2>
     <h2>JSX + Declarative Shadow DOM (has JS)</h2>
 
     <sb-card-jsx
-      title="iPhone 9"
-      thumbnail="https://i.dummyjson.com/data/products/1/thumbnail.jpg"
+      title="iPhone X"
+      thumbnail="https://i.dummyjson.com/data/products/2/thumbnail.jpg"
     ></sb-card-jsx>
 
     <pre>
       &lt;sb-card-jsx
-        title="iPhone 9" thumbnail="https://i.dummyjson.com/data/products/1/thumbnail.jpg"
+        title="iPhone X" thumbnail="https://i.dummyjson.com/data/products/2/thumbnail.jpg"
       &gt;&lt;/sb-card-jsx&gt;
     </pre>
 
@@ -97,12 +97,7 @@ <h2>JSX + Light DOM + inferredObservability (has JS)</h2>
 
     <hr/>
 
-    <!-- TODO - https://github.com/ProjectEvergreen/wcc/issues/128 -->
-    <h2>JSX + DSD + inferredObservability (has JS) 🚫</h2>
-
-    <details>
-      SSR Shadow DOM and inferredObservability not working, see - https://github.com/ProjectEvergreen/wcc/issues/128
-    </details>
+    <h2>JSX + DSD + inferredObservability (has JS)</h2>
 
     <sb-counter-dsd-jsx
       count="3"

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
@@ -270,11 +270,13 @@ export function parseJsx(moduleURL) {
                   // https://github.com/ProjectEvergreen/wcc/issues/130
                   const renderHandler = hasShadowRoot
                     ? `
-                        if(!${elementRoot}.shadowRoot) {
-                          const template = document.createElement('template');
+                        const template = document.createElement('template');
+                        template.innerHTML = \`${serializedHtml}\`;
 
-                          template.innerHTML = \`${serializedHtml}\`;
+                        if(!${elementRoot}) {
                           this.shadowRoot.appendChild(template.content.cloneNode(true));
+                        } else {
+                          this.shadowRoot.innerHTML = template.innerHTML;
                         }
                       `
                     : `${elementRoot}.innerHTML = \`${serializedHtml}\`;`;