From e47238d4dc9aa9e67f252d913cc8937619d6c47a Mon Sep 17 00:00:00 2001 From: Danny Moerkerke Date: Tue, 5 Nov 2024 12:51:33 +0100 Subject: [PATCH 1/2] - replaced deprecated method getInnerHTML with getHTML and made this return the HTML wrapped in a DSD template when the serializeShadowRoots option is set to true, which is according to the specs - updated tests - added missing closing square bracket in selector: this.shadowRoot.querySelector('script[type="application/json"') --- src/dom-shim.js | 13 ++----- src/wcc.js | 10 ++--- .../attributes/src/components/counter.js | 4 +- test/cases/get-data/src/components/counter.js | 20 +++++----- .../nested-elements/src/components/header.js | 38 +++++++++---------- 5 files changed, 37 insertions(+), 48 deletions(-) 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 ` - + + `; } } From 3b334fba52703ef32f4bfa905145849f1d49d89f Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Fri, 20 Dec 2024 14:11:55 -0500 Subject: [PATCH 2/2] updated example docs --- docs/pages/examples.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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)}