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 - ? `` - : 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' });