From 7dce91f5008e562b6aa256c137823da9bdf22c9b Mon Sep 17 00:00:00 2001
From: Kai Prince <34746763+KaiPrince@users.noreply.github.com>
Date: Sun, 15 Mar 2026 14:48:25 -0700
Subject: [PATCH] feat(jsx): always clear and clone from template

---
 src/jsx-loader.js | 26 ++++++++------------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 55b17e20..6a5bfc44 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -348,24 +348,14 @@ export function parseJsx(moduleURL) {
                     applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
 
                     const serializedHtml = serialize(elementTree);
-                    // we have to Shadow DOM use cases here
-                    // 1. No shadowRoot, so we attachShadow and append the template
-                    // 2. If there is root from the attachShadow signal, so we just need to inject innerHTML, say in an htmx
-                    // could / should we do something else instead of .innerHTML
-                    // https://github.com/ProjectEvergreen/wcc/issues/138
-                    const renderHandler = hasShadowRoot
-                      ? `
-                        const template = document.createElement('template');
-                        template.innerHTML = \`${serializedHtml}\`;
-
-                        if(!${elementRoot}) {
-                          this.attachShadow({ mode: 'open' });
-                          this.shadowRoot.appendChild(template.content.cloneNode(true));
-                        } else {
-                          this.shadowRoot.innerHTML = template.innerHTML;
-                        }
-                      `
-                      : `${elementRoot}.innerHTML = \`${serializedHtml}\`;`;
+
+                    const renderHandler = `
+                      const template = document.createElement('template');
+                      template.innerHTML = \`${serializedHtml}\`;
+
+                      ${elementRoot}.textContent = '';
+                      ${elementRoot}.appendChild(template.content.cloneNode(true));
+                    `;
                     const transformed = acorn.parse(renderHandler, {
                       ecmaVersion: 'latest',
                       sourceType: 'module',