Adding support of shadowrootmode (#1507)

* Adding support of shadowrootmode * Updating tests * Fixing specs * Reverting spec changes * Adding test for shadowroot
percy · Feb 8, 2024 · a23e339 · a23e339
1 parent 9d95f18
commit a23e339
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git 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
@@ -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 });