diff --git a/docs/pages/examples.md b/docs/pages/examples.md index 7c6a371f..605d2085 100644 --- a/docs/pages/examples.md +++ b/docs/pages/examples.md @@ -53,7 +53,7 @@ export default async function (request, context) { - ${greeting.getInnerHTML({ includeShadowRoots: true })} + ${greeting.getHTML({ serializableShadowRoots: true })} 
               ${JSON.stringify(context.geo)}
diff --git a/src/dom-shim.js b/src/dom-shim.js
index be289a3d..cbf5398a 100644
--- a/src/dom-shim.js
+++ b/src/dom-shim.js
@@ -45,10 +45,9 @@ class Element extends Node {
     return this.shadowRoot;
   }
 
-  // https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md#serialization
-  // eslint-disable-next-line
-  getInnerHTML() {
-    return this.shadowRoot ? this.shadowRoot.innerHTML : this.innerHTML;
+  getHTML({ serializableShadowRoots = false }) {
+    return this.shadowRoot && serializableShadowRoots ?
+      `` : this.innerHTML;
   }
 
   setAttribute(name, value) {
@@ -116,11 +115,7 @@ class HTMLTemplateElement extends HTMLElement {
   // TODO open vs closed shadow root
   set innerHTML(html) {
     if (this.content) {
-      this.content.innerHTML = `
-        
-      `;
+      this.content.innerHTML = html;
     }
   }
 
diff --git a/src/wcc.js b/src/wcc.js
index 68c7a2e3..c6872393 100644
--- a/src/wcc.js
+++ b/src/wcc.js
@@ -54,7 +54,7 @@ async function renderComponentRoots(tree, definitions) {
         if (elementInstance) {
           const hasShadow = elementInstance.shadowRoot;
           const elementHtml = hasShadow
-            ? elementInstance.getInnerHTML({ includeShadowRoots: true })
+            ? elementInstance.getHTML({ serializableShadowRoots: true })
             : elementInstance.innerHTML;
           const elementTree = parseFragment(elementHtml);
           const hasLight = elementTree.childNodes > 0;
@@ -222,14 +222,14 @@ async function initializeCustomElement(elementURL, tagName, node = {}, definitio
 
     attrs.forEach((attr) => {
       elementInstance.setAttribute(attr.name, attr.value);
-  
+
       if (attr.name === 'hydrate') {
         definitions[tagName].hydrate = attr.value;
       }
     });
-  
+
     await elementInstance.connectedCallback();
-  
+
     return elementInstance;
   }
 }
@@ -244,7 +244,7 @@ async function renderToString(elementURL, wrappingEntryTag = true, props = {}) {
   // in case the entry point isn't valid
   if (elementInstance) {
     const elementHtml = elementInstance.shadowRoot
-      ? elementInstance.getInnerHTML({ includeShadowRoots: true })
+      ? elementInstance.getHTML({ serializableShadowRoots: true })
       : elementInstance.innerHTML;
     const elementTree = getParse(elementHtml)(elementHtml);
     const finalTree = await renderComponentRoots(elementTree, definitions);
diff --git a/test/cases/attributes/src/components/counter.js b/test/cases/attributes/src/components/counter.js
index 753fe993..4c8e5eb9 100644
--- a/test/cases/attributes/src/components/counter.js
+++ b/test/cases/attributes/src/components/counter.js
@@ -39,7 +39,7 @@ class Counter extends HTMLElement {
   }
 
   hydrate() {
-    this.count = parseInt(JSON.parse(this.shadowRoot.querySelector('script[type="application/json"').text).count, 10);
+    this.count = parseInt(JSON.parse(this.shadowRoot.querySelector('script[type="application/json"]').text).count, 10);
 
     const buttonDec = this.shadowRoot.querySelector('button#dec');
     const buttonInc = this.shadowRoot.querySelector('button#inc');
@@ -54,13 +54,11 @@ class Counter extends HTMLElement {
 
   render() {
     return `
-      
     `;
   }
 }
diff --git a/test/cases/get-data/src/components/counter.js b/test/cases/get-data/src/components/counter.js
index 3aa23b1b..c30aa9c6 100644
--- a/test/cases/get-data/src/components/counter.js
+++ b/test/cases/get-data/src/components/counter.js
@@ -37,7 +37,7 @@ class Counter extends HTMLElement {
 
   hydrate() {
     console.debug('COUNTER => hydrate');
-    this.count = parseInt(JSON.parse(this.shadowRoot.querySelector('script[type="application/json"').text).count, 10);
+    this.count = parseInt(JSON.parse(this.shadowRoot.querySelector('script[type="application/json"]').text).count, 10);
 
     const buttonDec = this.shadowRoot.querySelector('button#dec');
     const buttonInc = this.shadowRoot.querySelector('button#inc');
@@ -52,17 +52,15 @@ class Counter extends HTMLElement {
 
   render() {
     return `
-      
+      

+        
+        Current Count: ${this.count}
+        
+      

     `;
   }
 }
diff --git a/test/cases/nested-elements/src/components/header.js b/test/cases/nested-elements/src/components/header.js
index 92f0fe2f..927b5837 100644
--- a/test/cases/nested-elements/src/components/header.js
+++ b/test/cases/nested-elements/src/components/header.js
@@ -11,29 +11,27 @@ class Header extends HTMLElement {
 
   render() {
     return `
-      
+        
+      
     `;
   }
 }