output JSX DSD as a template element

ProjectEvergreen · Jan 4, 2024 · 99478ea · 99478ea
1 parent d5908d2
commit 99478ea
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/src/jsx-loader.js b/src/jsx-loader.js
@@ -266,12 +266,19 @@ export function parseJsx(moduleURL) {
                   applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
 
                   const serializedHtml = serialize(elementTree);
-                  // would be nice to reuse HTMLTemplateElement here...
-                  const finalHtml = hasShadowRoot
-                    ? `<template shadowrootmode="open">${serializedHtml}</template>`
-                    : serializedHtml;
-
-                  const transformed = acorn.parse(`${elementRoot}.innerHTML = \`${finalHtml}\`;`, {
+                  // could / should we do something else instead of .innerHTML for light DOM?
+                  // https://github.com/ProjectEvergreen/wcc/issues/130
+                  const renderHandler = hasShadowRoot
+                    ? `
+                        if(!${elementRoot}.shadowRoot) {
+                          const template = document.createElement('template');
+
+                          template.innerHTML = \`${serializedHtml}\`;
+                          this.shadowRoot.appendChild(template.content.cloneNode(true));
+                        }
+                      `
+                    : `${elementRoot}.innerHTML = \`${serializedHtml}\`;`;
+                  const transformed = acorn.parse(renderHandler, {
                     ecmaVersion: 'latest',
                     sourceType: 'module'
                   });