enhancement/misc DSD refactoring (#17)

* refactor this reference in Card component to use getRootNode

* use DOMParser for injecting HTML with shadow roots from fragments API

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' });

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>

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>