From 606b25c3c7a4e10b50c7a3c1288529058708b156 Mon Sep 17 00:00:00 2001 From: Owen Buckley <owenbuckley13@gmail.com> Date: Wed, 3 Jan 2024 21:02:23 -0500 Subject: [PATCH 1/2] refactor this reference in Card component to use getRootNode --- src/components/card.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/card.js b/src/components/card.js index 575b2dc..a936af8 100644 --- a/src/components/card.js +++ b/src/components/card.js @@ -57,7 +57,7 @@ export default class Card extends HTMLElement { <div> <h3>${title}</h3> <img src="${thumbnail}" alt="${title}" loading="lazy" width="100%"> - <button onclick="this.parentNode.parentNode.host.selectItem()">View Item Details</button> + <button onclick="this.getRootNode().host.selectItem()">View Item Details</button> </div> `; this.attachShadow({ mode: 'open' }); From 67e87e4df538afe301727de752fbd36f956cf32e Mon Sep 17 00:00:00 2001 From: Owen Buckley <owenbuckley13@gmail.com> Date: Wed, 3 Jan 2024 21:02:45 -0500 Subject: [PATCH 2/2] use DOMParser for injecting HTML with shadow roots from fragments API --- src/pages/index.html | 5 ++++- src/pages/search.html | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/pages/index.html b/src/pages/index.html index 075601e..c75dade 100644 --- a/src/pages/index.html +++ b/src/pages/index.html @@ -24,8 +24,11 @@ globalThis.document.getElementById('load-products').addEventListener('click', async () => { offset = offset += page; const html = await fetch(`/api/fragment?offset=${offset}`).then(resp => resp.text()); + const fragment = new DOMParser().parseFromString(html, 'text/html', { + includeShadowRoots: true + }); - document.getElementById('load-products-output').insertAdjacentHTML('beforeend', html); + document.getElementById('load-products-output').insertAdjacentHTML('beforeend', fragment.body.innerHTML); }); }); </script> diff --git a/src/pages/search.html b/src/pages/search.html index f0f78c7..4110bbb 100644 --- a/src/pages/search.html +++ b/src/pages/search.html @@ -15,8 +15,11 @@ 'content-type': 'application/x-www-form-urlencoded' }) }).then(resp => resp.text()); + const fragment = new DOMParser().parseFromString(html, 'text/html', { + includeShadowRoots: true + }); - document.getElementById('search-products-output').innerHTML = html; + document.getElementById('search-products-output').innerHTML = fragment.body.innerHTML; }); }); </script>