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>