refactor HTMLTemplateElement implementation to manage template tag cr…

…eation for shadow roots
ProjectEvergreen · Jun 14, 2022 · 9b1496a · 9b1496a
1 parent 2c74820
commit 9b1496a
Show file tree

Hide file tree

Showing 21 changed files with 305 additions and 324 deletions.
diff --git a/docs/components/footer.js b/docs/components/footer.js
@@ -1,36 +1,36 @@
-const template = document.createElement('template');
-
-template.innerHTML = `
-  <style>
-    footer {
-      background-color: var(--accent);
-      min-height: 30px;
-      padding: 10px 0;
-      grid-column: 1 / -1;
-      text-align: center;
-    }
+class Footer extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = this.render();
+  }
 
-    footer p {
-      margin: 0 auto;
-      font-weight: bold;
-    }
+  render() {
+    return `
+      <style>
+        footer {
+          background-color: var(--accent);
+          min-height: 30px;
+          padding: 10px 0;
+          grid-column: 1 / -1;
+          text-align: center;
+        }
 
-    footer a, footer a:visited {
-      color: #efefef;
-      text-decoration: none;
-    }
-  </style>
+        footer p {
+          margin: 0 auto;
+          font-weight: bold;
+        }
 
-  <footer>
-    <p>
-      <a href="https://projectevergreen.github.io">WCC &#9672 Project Evergreen</a>
-    </p>
-  </footer>
-`;
+        footer a, footer a:visited {
+          color: #efefef;
+          text-decoration: none;
+        }
+      </style>
 
-class Footer extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = template.content.textContent;
+      <footer>
+        <p>
+          <a href="https://projectevergreen.github.io">WCC &#9672 Project Evergreen</a>
+        </p>
+      </footer>
+    `;
   }
 }
 

diff --git a/docs/components/header.js b/docs/components/header.js
@@ -1,67 +1,67 @@
 import './navigation.js';
 
-const template = document.createElement('template');
-
-template.innerHTML = `
-  <style>
-    header {
-      background-color: var(--accent);
-      grid-column: 1 / -1;
-      min-height: 150px;
-    }
+class Header extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = this.render();
+  }
 
-    header .social {
-      text-align: right;
-      padding: 10px 10px 0 0;
-    }
+  render() {
+    return `
+      <style>
+        header {
+          background-color: var(--accent);
+          grid-column: 1 / -1;
+          min-height: 150px;
+        }
 
-    header .social img{
-      margin-top: 1%;
-    }
+        header .social {
+          text-align: right;
+          padding: 10px 10px 0 0;
+        }
 
-    header .logo {
-      width: 15%;
-      filter: drop-shadow(0 0 0.75rem white);
-    }
+        header .social img{
+          margin-top: 1%;
+        }
 
-    header img.github-badge {
-      float: right;
-      display: inline-block;
-      padding: 10px;
-      align-items: top;
-    }
+        header .logo {
+          width: 15%;
+          filter: drop-shadow(0 0 0.75rem white);
+        }
 
-    header div.container {
-      max-width: 1200px;
-      margin: auto;
-    }
-  </style>
+        header img.github-badge {
+          float: right;
+          display: inline-block;
+          padding: 10px;
+          align-items: top;
+        }
 
-  <header>
-    <div class="container">
-      <div>
-        <a href="/">
-          <img src="/assets/wcc-logo.png" alt="WCC logo" class="logo"/>
-        </a>
+        header div.container {
+          max-width: 1200px;
+          margin: auto;
+        }
+      </style>
 
-        <a href="https://github.com/ProjectEvergreen/wcc" class="social">
-          <img
-            src="https://img.shields.io/github/stars/ProjectEvergreen/wcc.svg?style=social&logo=github&label=github"
-            alt="WCC GitHub badge"
-            width="135px"
-            class="github-badge"
-          />
-        </a>
-      </div>
+      <header>
+        <div class="container">
+          <div>
+            <a href="/">
+              <img src="/assets/wcc-logo.png" alt="WCC logo" class="logo"/>
+            </a>
 
-      <wcc-navigation></wcc-navigation>
-    </div>
-  </header>
-`;
+            <a href="https://github.com/ProjectEvergreen/wcc" class="social">
+              <img
+                src="https://img.shields.io/github/stars/ProjectEvergreen/wcc.svg?style=social&logo=github&label=github"
+                alt="WCC GitHub badge"
+                width="135px"
+                class="github-badge"
+              />
+            </a>
+          </div>
 
-class Header extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = template.content.textContent;
+          <wcc-navigation></wcc-navigation>
+        </div>
+      </header>
+    `;
   }
 }
 

diff --git a/docs/components/navigation.js b/docs/components/navigation.js
@@ -1,41 +1,40 @@
-// intentionally nested in the assets/ directory to test wcc nested dependency resolution logic
-const template = document.createElement('template');
-
-template.innerHTML = `
-  <style>
-    nav ul {
-      list-style-type: none;
-      overflow: auto;
-      grid-column: 1 / -1;
-      width: 90%;
-    }
+class Navigation extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = this.render();
+  }
 
-    nav ul li {
-      float: left;
-      width: 33.3%;
-      text-align: center;
-    }
+  render() {
+    return `
+      <style>
+        nav ul {
+          list-style-type: none;
+          overflow: auto;
+          grid-column: 1 / -1;
+          width: 90%;
+        }
 
-    nav ul li a, nav ul li a:visited {
-      display: inline-block;
-      color: #efefef;
-      min-height: 48px;
-      font-size: 2.5rem;
-    }
-  </style>
+        nav ul li {
+          float: left;
+          width: 33.3%;
+          text-align: center;
+        }
 
-  <nav>
-    <ul>
-      <li><a href="/">Home</a></li>
-      <li><a href="/docs">Docs</a></li>
-      <li><a href="/examples">Examples</a></li>
-    </ul>
-  </nav>
-`;
+        nav ul li a, nav ul li a:visited {
+          display: inline-block;
+          color: #efefef;
+          min-height: 48px;
+          font-size: 2.5rem;
+        }
+      </style>
 
-class Navigation extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = template.content.textContent;
+      <nav>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/docs">Docs</a></li>
+          <li><a href="/examples">Examples</a></li>
+        </ul>
+      </nav>
+    `
   }
 }
 

diff --git a/docs/layout.js b/docs/layout.js
@@ -1,43 +1,43 @@
 import './components/footer.js';
 import './components/header.js';
 
-const template = document.createElement('template');
-
-template.innerHTML = `
-  <style>
-    :root {
-      --accent: #367588;
-    }
-
-    body {
-      display: flex;
-      flex-direction: column;
-    }
-
-    main {
-      max-width: 1200px;
-      margin: 20px auto;
-      width: 100%;
-      padding: 0 1rem;
-    }
-
-    a:visited {
-      color: var(--accent);
-    }
-  </style>
-
-  <wcc-header></wcc-header>
-
-  <main>
-    <slot name="content"></slot>
-  </main>
-
-  <wcc-footer></wcc-footer>
-`;
-
 class Layout extends HTMLElement {
   connectedCallback() {
-    this.innerHTML = template.content.textContent;
+    this.innerHTML = this.render();
+  }
+
+  render() {
+    return `
+      <style>
+        :root {
+          --accent: #367588;
+        }
+
+        body {
+          display: flex;
+          flex-direction: column;
+        }
+
+        main {
+          max-width: 1200px;
+          margin: 20px auto;
+          width: 100%;
+          padding: 0 1rem;
+        }
+
+        a:visited {
+          color: var(--accent);
+        }
+      </style>
+
+      <wcc-header></wcc-header>
+
+      <main>
+        <slot name="content"></slot>
+      </main>
+
+      <wcc-footer></wcc-footer>
+    `;
   }
 }
 

diff --git a/src/dom-shim.js b/src/dom-shim.js
@@ -3,6 +3,7 @@ class EventTarget { }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/Node
 // EventTarget <- Node
+// TODO should be an interface?
 class Node extends EventTarget {
   constructor() {
     super();
@@ -15,7 +16,7 @@ class Node extends EventTarget {
   }
 
   appendChild(node) {
-    this.innerHTML = this.innerHTML ? this.innerHTML += node.textContent : node.textContent;
+    this.innerHTML = this.innerHTML ? this.innerHTML += node.innerHTML : node.innerHTML;
   }
 }
 
@@ -63,14 +64,9 @@ class HTMLElement extends Element {
   }
 
   // https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md#serialization
+  // eslint-disable-next-line
   getInnerHTML(options = {}) {
-    return options.includeShadowRoots
-      ? `
-        <template shadowroot="${this.shadowRoot.mode}">
-          ${this.shadowRoot.innerHTML}
-        </template>
-      `
-      : this.shadowRoot.innerHTML;
+    return this.shadowRoot.innerHTML;
   }
 }
 
@@ -101,11 +97,20 @@ class HTMLTemplateElement extends HTMLElement {
     super();
     // console.debug('HTMLTemplateElement constructor');
 
-    this.content = new DocumentFragment(this.innerHTML);
+    this.content = new DocumentFragment();
   }
 
+  // TODO open vs closed shadow root
   set innerHTML(html) {
-    this.content.textContent = html;
+    this.content.innerHTML = `
+      <template shadowroot="open">
+        ${html}
+      </template>
+    `;
+  }
+
+  get innerHTML() {
+    return this.content && this.content.innerHTML ? this.content.innerHTML : undefined;
   }
 }