From a23e33989102703688336718bc84471a30984ac1 Mon Sep 17 00:00:00 2001
From: rishigupta1599 <114384996+rishigupta1599@users.noreply.github.com>
Date: Thu, 8 Feb 2024 20:30:05 +0530
Subject: [PATCH] Adding support of shadowrootmode (#1507)

* Adding support of shadowrootmode

* Updating tests

* Fixing specs

* Reverting spec changes

* Adding test for shadowroot
---
 packages/dom/src/inject-polyfill.js       | 15 ++++++++++++---
 packages/dom/test/inject-polyfill.test.js | 16 ++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/dom/src/inject-polyfill.js b/packages/dom/src/inject-polyfill.js
index 0669bd833..d68eb1cb4 100644
--- a/packages/dom/src/inject-polyfill.js
+++ b/packages/dom/src/inject-polyfill.js
@@ -8,12 +8,21 @@ export function injectDeclarativeShadowDOMPolyfill(ctx) {
   scriptEl.setAttribute('data-percy-injected', true);
 
   scriptEl.innerHTML = `
+    function attachShadow(template, mode){
+      const shadowRoot = template.parentNode.attachShadow({ mode });
+      shadowRoot.appendChild(template.content);
+      template.remove();
+    }
+
     function reversePolyFill(root=document){
       root.querySelectorAll('template[shadowroot]').forEach(template => {
         const mode = template.getAttribute('shadowroot');
-        const shadowRoot = template.parentNode.attachShadow({ mode });
-        shadowRoot.appendChild(template.content);
-        template.remove();
+        attachShadow(template, mode);
+      });
+
+      root.querySelectorAll('template[shadowrootmode]').forEach(template => {
+        const mode = template.getAttribute('shadowrootmode');
+        attachShadow(template, mode);
       });
 
       root.querySelectorAll('[data-percy-shadow-host]').forEach(shadowHost => reversePolyFill(shadowHost.shadowRoot));
diff --git a/packages/dom/test/inject-polyfill.test.js b/packages/dom/test/inject-polyfill.test.js
index bbb8ecc20..3847626a1 100644
--- a/packages/dom/test/inject-polyfill.test.js
+++ b/packages/dom/test/inject-polyfill.test.js
@@ -6,12 +6,28 @@ describe('injectDeclarativeShadowDOMPolyfill', () => {
 
   beforeEach(() => {
     dom = withExample(`
+        <div data-percy-shadow-host>
+        <template shadowrootmode="open">
+                <div data-percy-shadow-host>
+                    <template shadowrootmode="open">
+                    </template>
+                </div>
+                <div data-percy-shadow-host>
+                    <template shadowrootmode="open">
+                    </template>
+                </div>
+        </template>
+        </div>
         <div data-percy-shadow-host>
         <template shadowroot="open">
                 <div data-percy-shadow-host>
                     <template shadowroot="open">
                     </template>
                 </div>
+                <div data-percy-shadow-host>
+                    <template shadowroot="open">
+                    </template>
+                </div>
         </template>
         </div>
         `, { withShadow: false });