From 81c969c1ea0aa522e037a0c9b827b11751c7f193 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 6 Jan 2024 13:47:52 -0500
Subject: [PATCH] use DOMParser before injecting Fragments API responses (#25)

---
 src/pages/index.html  | 6 +++++-
 src/pages/search.html | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.html b/src/pages/index.html
index f3c07ab..d4754f9 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -24,9 +24,13 @@
 
         globalThis.document.getElementById('load-products').addEventListener('click', async () => {
           offset = offset += page;
+
           const html = await fetch(`/api/fragment?offset=${offset}&limit=10`).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 d4f56df..8023f6f 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>