use DOMParser before injecting Fragments API responses

ProjectEvergreen · Jan 6, 2024 · 40eb1d5 · 40eb1d5
1 parent 222efaa
commit 40eb1d5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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>