From 99478ea91fa2fcb9760c9cd4ded1ef192ffdc36c Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Wed, 3 Jan 2024 20:26:34 -0500
Subject: [PATCH] output JSX DSD as a template element

---
 src/jsx-loader.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 413ea0b..57dc544 100644
--- 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'
                   });