From 9b1496af311935e0fa17ce675625ac33f939079b Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Fri, 10 Jun 2022 20:33:46 -0400 Subject: [PATCH] refactor HTMLTemplateElement implementation to manage template tag creation for shadow roots --- docs/components/footer.js | 58 +++++----- docs/components/header.js | 106 +++++++++--------- docs/components/navigation.js | 67 ++++++----- docs/layout.js | 70 ++++++------ src/dom-shim.js | 25 +++-- test/cases/attributes/attributes.spec.js | 14 +-- .../attributes/src/components/counter.js | 12 +- test/cases/attributes/src/index.js | 28 ++--- .../children-and-slots.spec.js | 21 ++-- .../children-and-slots/src/pages/index.js | 5 +- test/cases/get-data/get-data.spec.js | 14 +-- test/cases/get-data/src/components/counter.js | 18 +-- test/cases/get-data/src/index.js | 11 +- test/cases/light-dom/light-dom.spec.js | 10 +- .../light-dom/src/components/navigation.js | 22 ++-- .../nested-elements/nested-elements.spec.js | 12 +- .../nested-elements/src/components/header.js | 38 ++++--- test/cases/nested-elements/src/pages/index.js | 22 ++-- .../render-from-html/render-from-html.spec.js | 12 +- .../render-from-html/src/components/header.js | 54 ++++----- .../single-element/single-element.spec.js | 10 +- 21 files changed, 305 insertions(+), 324 deletions(-) diff --git a/docs/components/footer.js b/docs/components/footer.js index 4a36ad5..63aa1a6 100644 --- a/docs/components/footer.js +++ b/docs/components/footer.js @@ -1,36 +1,36 @@ -const template = document.createElement('template'); - -template.innerHTML = ` - + footer p { + margin: 0 auto; + font-weight: bold; + } - -`; + footer a, footer a:visited { + color: #efefef; + text-decoration: none; + } + -class Footer extends HTMLElement { - connectedCallback() { - this.innerHTML = template.content.textContent; + + `; } } diff --git a/docs/components/header.js b/docs/components/header.js index 4c54f45..0b5495e 100644 --- a/docs/components/header.js +++ b/docs/components/header.js @@ -1,67 +1,67 @@ import './navigation.js'; -const template = document.createElement('template'); - -template.innerHTML = ` - + header img.github-badge { + float: right; + display: inline-block; + padding: 10px; + align-items: top; + } -
-
-
- - - + header div.container { + max-width: 1200px; + margin: auto; + } + - -
+
+
+
+ + + - -
-
-`; + +
-class Header extends HTMLElement { - connectedCallback() { - this.innerHTML = template.content.textContent; + + +
+ `; } } diff --git a/docs/components/navigation.js b/docs/components/navigation.js index 731bc3d..a3a5c11 100644 --- 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 = ` - + nav ul li { + float: left; + width: 33.3%; + text-align: center; + } - -`; + nav ul li a, nav ul li a:visited { + display: inline-block; + color: #efefef; + min-height: 48px; + font-size: 2.5rem; + } + -class Navigation extends HTMLElement { - connectedCallback() { - this.innerHTML = template.content.textContent; + + ` } } diff --git a/docs/layout.js b/docs/layout.js index 08a6740..7658720 100644 --- 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 = ` - - - - -
- -
- - -`; - class Layout extends HTMLElement { connectedCallback() { - this.innerHTML = template.content.textContent; + this.innerHTML = this.render(); + } + + render() { + return ` + + + + +
+ +
+ + + `; } } diff --git a/src/dom-shim.js b/src/dom-shim.js index a41c343..71fcee0 100644 --- 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 - ? ` - - ` - : 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 = ` + + `; + } + + get innerHTML() { + return this.content && this.content.innerHTML ? this.content.innerHTML : undefined; } } diff --git a/test/cases/attributes/attributes.spec.js b/test/cases/attributes/attributes.spec.js index fad814f..f35c070 100644 --- a/test/cases/attributes/attributes.spec.js +++ b/test/cases/attributes/attributes.spec.js @@ -21,24 +21,22 @@ const expect = chai.expect; describe('Run WCC For ', function() { const LABEL = 'Custom Element w/ Attributes and Shadow DOM'; let dom; - let pageContentsDom; before(async function() { const { html } = await renderToString(new URL('./src/index.js', import.meta.url)); dom = new JSDOM(html); - pageContentsDom = new JSDOM(dom.window.document.querySelectorAll('template[shadowroot="open"]')[0].innerHTML); }); describe(LABEL, function() { - it('should have one top level