From a83b9af8f8f8395d2ba30b44c2dbef6537a55169 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sun, 5 Jun 2022 13:01:50 -0400
Subject: [PATCH 1/2] innerHTML / light DOM support

---
 src/wcc.js                                    | 16 +++-
 test/cases/light-dom/light-dom.spec.js        | 79 +++++++++++++++++++
 test/cases/light-dom/src/components/header.js | 37 +++++++++
 .../light-dom/src/components/navigation.js    | 23 ++++++
 test/cases/light-dom/src/pages/index.js       | 16 ++++
 5 files changed, 167 insertions(+), 4 deletions(-)
 create mode 100644 test/cases/light-dom/light-dom.spec.js
 create mode 100644 test/cases/light-dom/src/components/header.js
 create mode 100644 test/cases/light-dom/src/components/navigation.js
 create mode 100644 test/cases/light-dom/src/pages/index.js

diff --git a/src/wcc.js b/src/wcc.js
index cbed750e..d05ac419 100644
--- a/src/wcc.js
+++ b/src/wcc.js
@@ -30,10 +30,16 @@ async function renderComponentRoots(tree, includeShadowRoots = true) {
       const { moduleURL } = definitions[tagName];
       const elementInstance = await initializeCustomElement(moduleURL, tagName, node.attrs);
 
-      const shadowRootHtml = elementInstance.getInnerHTML({ includeShadowRoots });
-      const shadowRootTree = parseFragment(shadowRootHtml);
+      if (elementInstance.shadowRoot) {
+        const shadowRootHtml = elementInstance.getInnerHTML({ includeShadowRoots });
+        const shadowRootTree = parseFragment(shadowRootHtml);
 
-      node.childNodes = node.childNodes.length === 0 ? shadowRootTree.childNodes : [...shadowRootTree.childNodes, ...node.childNodes];
+        node.childNodes = node.childNodes.length === 0 ? shadowRootTree.childNodes : [...shadowRootTree.childNodes, ...node.childNodes];  
+      } else {
+        const domTree = parseFragment(elementInstance.innerHTML);
+
+        node.childNodes = node.childNodes.length === 0 ? domTree.childNodes : [...domTree.childNodes, ...node.childNodes];
+      }
     }
 
     if (node.childNodes && node.childNodes.length > 0) {
@@ -130,7 +136,9 @@ async function renderToString(elementURL, options = {}) {
   const elementTagName = await getTagName(elementURL);
   const elementInstance = await initializeCustomElement(elementURL);
 
-  const elementHtml = elementInstance.getInnerHTML({ includeShadowRoots });
+  const elementHtml = elementInstance.shadowRoot
+    ? elementInstance.getInnerHTML({ includeShadowRoots })
+    : elementInstance.innerHTML;
   const elementTree = getParse(elementHtml)(elementHtml);
   const finalTree = await renderComponentRoots(elementTree, includeShadowRoots);
   const html = !lightMode && elementTagName ? `
diff --git a/test/cases/light-dom/light-dom.spec.js b/test/cases/light-dom/light-dom.spec.js
new file mode 100644
index 00000000..7f0a9cfd
--- /dev/null
+++ b/test/cases/light-dom/light-dom.spec.js
@@ -0,0 +1,79 @@
+/*
+ * Use Case
+ * Run wcc against nested custom elements using just innerHTML to intentionally NOT render Shadow DOM.
+ *
+ * User Result
+ * Should return the expected HTML with no template tags or Shadow Roots.
+ *
+ * User Workspace
+ * src/
+ *   components/
+ *     navigation.js
+ *     header.js
+ *   pages/
+ *     index.js
+ */
+import chai from 'chai';
+import { JSDOM } from 'jsdom';
+import { renderToString } from '../../../src/wcc.js';
+
+const expect = chai.expect;
+
+describe('Run WCC For ', function() {
+  const LABEL = 'Nested Custom Element using only innerHTML (no Shadow DOM)';
+  let dom;
+
+  before(async function() {
+    const { html } = await renderToString(new URL('./src/pages/index.js', import.meta.url));
+
+    dom = new JSDOM(html);
+  });
+
+  describe(LABEL, function() {
+    it('should not have any <template> tags within the document', function() {
+      expect(dom.window.document.querySelectorAll('template').length).to.equal(0);
+    });
+
+    describe('static page content', function() {
+      it('should have the expected static content for the page', function() {
+        expect(dom.window.document.querySelector('h1').textContent).to.equal('Home Page');
+      });
+    });
+
+    describe('custom header element with nested navigation element', function() {
+      let headerContentsDom;
+
+      before(function() {
+        headerContentsDom = new JSDOM(dom.window.document.querySelectorAll('header')[0].innerHTML);
+      });
+
+      it('should have a <header> tag within the document', function() {
+        expect(dom.window.document.querySelectorAll('header').length).to.equal(1);
+      });
+
+      it('should have expected content within the <header> tag', function() {
+        const content = headerContentsDom.window.document.querySelector('a h4').textContent;
+  
+        expect(content).to.contain('My Personal Blog');
+      });
+
+      describe('nested navigation element', function() {
+        let navigationContentsDom;
+  
+        before(function() {
+          navigationContentsDom = new JSDOM(dom.window.document.querySelectorAll('wcc-navigation')[0].innerHTML);
+        });
+  
+        it('should have a <nav> tag within the <template> shadowroot', function() {
+          expect(navigationContentsDom.window.document.querySelectorAll('nav').length).to.equal(1);
+        });
+  
+        it('should have three links within the <nav> element', function() {
+          const links = navigationContentsDom.window.document.querySelectorAll('nav ul li a');
+    
+          expect(links.length).to.equal(3);
+        });
+      });
+    });
+  });
+});
\ No newline at end of file
diff --git a/test/cases/light-dom/src/components/header.js b/test/cases/light-dom/src/components/header.js
new file mode 100644
index 00000000..6cf88112
--- /dev/null
+++ b/test/cases/light-dom/src/components/header.js
@@ -0,0 +1,37 @@
+import './navigation.js';
+
+class Header extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = this.render();
+  }
+
+  render() {
+    return `
+      <header>
+        <div>
+          <a href="/">
+            <img src="/www/assets/greenwood-logo.jpg" alt="Greenwood logo"/>
+            <h4>My Personal Blog</h4>
+          </a>
+        </div>
+
+        <wcc-navigation></wcc-navigation>
+
+        <div class="social">
+          <a href="https://github.com/ProjectEvergreen/greenwood">
+            <img
+              src="https://img.shields.io/github/stars/ProjectEvergreen/greenwood.svg?style=social&logo=github&label=github"
+              alt="Greenwood GitHub badge"
+              class="github-badge"/>
+          </a>
+        </div>
+      </header>
+    `;
+  }
+}
+
+export {
+  Header
+};
+
+customElements.define('wcc-header', Header);
\ No newline at end of file
diff --git a/test/cases/light-dom/src/components/navigation.js b/test/cases/light-dom/src/components/navigation.js
new file mode 100644
index 00000000..2ff6aa4e
--- /dev/null
+++ b/test/cases/light-dom/src/components/navigation.js
@@ -0,0 +1,23 @@
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <nav>
+    <ul>
+      <li><a href="/">Home</a></li>
+      <li><a href="/about">About</a></li>
+      <li><a href="/artists">Artists</a></li>
+    <ul>
+  </nav>
+`;
+
+class Navigation extends HTMLElement {
+  connectedCallback() {
+    this.appendChild(template.content.cloneNode(true));
+  }
+}
+
+export {
+  Navigation
+};
+
+customElements.define('wcc-navigation', Navigation);
\ No newline at end of file
diff --git a/test/cases/light-dom/src/pages/index.js b/test/cases/light-dom/src/pages/index.js
new file mode 100644
index 00000000..f1c52bb8
--- /dev/null
+++ b/test/cases/light-dom/src/pages/index.js
@@ -0,0 +1,16 @@
+import '../components/header.js';
+
+export default class HomePage extends HTMLElement {
+
+  connectedCallback() {
+    this.innerHTML = this.getTemplate();
+  }
+
+  getTemplate() {
+    return `
+      <wcc-header></wcc-header>
+
+      <h1>Home Page</h1>
+    `;
+  }
+}
\ No newline at end of file

From c02c955a8516cf8cbc11d2bbe7b523411ea4cd0d Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sun, 5 Jun 2022 13:04:23 -0400
Subject: [PATCH 2/2] refactor

---
 src/wcc.js | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/wcc.js b/src/wcc.js
index d05ac419..cc499058 100644
--- a/src/wcc.js
+++ b/src/wcc.js
@@ -29,17 +29,14 @@ async function renderComponentRoots(tree, includeShadowRoots = true) {
       const { tagName } = node;
       const { moduleURL } = definitions[tagName];
       const elementInstance = await initializeCustomElement(moduleURL, tagName, node.attrs);
-
-      if (elementInstance.shadowRoot) {
-        const shadowRootHtml = elementInstance.getInnerHTML({ includeShadowRoots });
-        const shadowRootTree = parseFragment(shadowRootHtml);
-
-        node.childNodes = node.childNodes.length === 0 ? shadowRootTree.childNodes : [...shadowRootTree.childNodes, ...node.childNodes];  
-      } else {
-        const domTree = parseFragment(elementInstance.innerHTML);
-
-        node.childNodes = node.childNodes.length === 0 ? domTree.childNodes : [...domTree.childNodes, ...node.childNodes];
-      }
+      const elementHtml = elementInstance.shadowRoot
+        ? elementInstance.getInnerHTML({ includeShadowRoots })
+        : elementInstance.innerHTML;
+      const elementTree = parseFragment(elementHtml);
+      
+      node.childNodes = node.childNodes.length === 0 
+        ? elementTree.childNodes
+        : [...elementTree.childNodes, ...node.childNodes];
     }
 
     if (node.childNodes && node.childNodes.length > 0) {