@percy/dom 1.31.2-beta.1 → 1.31.2-beta.3

package/dist/bundle.js

@@ -194,7 +194,7 @@
     function uid() {
       return `_${Math.random().toString(36).substr(2, 9)}`;
     }
-    function markElement(domElement, disableShadowDOM) {
+    function markElement(domElement, disableShadowDOM, forceShadowAsLightDOM) {
       var _domElement$tagName;
       // Mark elements that are to be serialized later with a data attribute.
       if (['input', 'textarea', 'select', 'iframe', 'canvas', 'video', 'style'].includes((_domElement$tagName = domElement.tagName) === null || _domElement$tagName === void 0 ? void 0 : _domElement$tagName.toLowerCase())) {
@@ -205,7 +205,10 @@
 
       // add special marker for shadow host
       if (!disableShadowDOM && domElement.shadowRoot) {
-        domElement.setAttribute('data-percy-shadow-host', '');
+        // When forceShadowAsLightDOM is true, don't mark as shadow host
+        if (!forceShadowAsLightDOM) {
+          domElement.setAttribute('data-percy-shadow-host', '');
+        }
         if (!domElement.getAttribute('data-percy-element-id')) {
           domElement.setAttribute('data-percy-element-id', uid());
         }
@@ -565,6 +568,7 @@
       let {
         dom,
         disableShadowDOM,
+        forceShadowAsLightDOM,
         resources,
         cache,
         enableJavaScript
@@ -582,7 +586,7 @@
           };
 
           // mark the node before cloning
-          markElement(node, disableShadowDOM);
+          markElement(node, disableShadowDOM, forceShadowAsLightDOM);
           let clone = cloneElementWithoutLifecycle(node);
 
           // Handle <style> tag specifically for media queries
@@ -618,18 +622,23 @@
 
           // clone shadow DOM
           if (node.shadowRoot && !disableShadowDOM) {
-            // create shadowRoot
-            if (clone.shadowRoot) {
-              // it may be set up in a custom element's constructor
-              clone.shadowRoot.innerHTML = '';
+            if (forceShadowAsLightDOM) {
+              // When forceShadowAsLightDOM is true, treat shadow content as normal DOM
+              walkTree(node.shadowRoot.firstChild, clone);
             } else {
-              clone.attachShadow({
-                mode: 'open',
-                serializable: true
-              });
+              // create shadowRoot
+              if (clone.shadowRoot) {
+                // it may be set up in a custom element's constructor
+                clone.shadowRoot.innerHTML = '';
+              } else {
+                clone.attachShadow({
+                  mode: 'open',
+                  serializable: true
+                });
+              }
+              // clone dom elements
+              walkTree(node.shadowRoot.firstChild, clone.shadowRoot);
             }
-            // clone dom elements
-            walkTree(node.shadowRoot.firstChild, clone.shadowRoot);
           }
 
           // clone light DOM
@@ -654,10 +663,15 @@
      * Use `getInnerHTML()` to serialize shadow dom as <template> tags. `innerHTML` and `outerHTML` don't do this. Buzzword: "declarative shadow dom"
      */
     function getOuterHTML(docElement, {
-      shadowRootElements
+      shadowRootElements,
+      forceShadowAsLightDOM
     }) {
       // chromium gives us declarative shadow DOM serialization API
       let innerHTML = '';
+      // When forceShadowAsLightDOM is true, treat shadow DOM as normal HTML
+      if (forceShadowAsLightDOM) {
+        return docElement.outerHTML;
+      }
       /* istanbul ignore else if: Only triggered in chrome <= 128 and tests runs on latest */
       if (docElement.getHTML) {
         // All major browsers in latest versions supports getHTML API to get serialized DOM
@@ -702,7 +716,8 @@
     // Serializes and returns the cloned DOM as an HTML string
     function serializeHTML(ctx) {
       let html = getOuterHTML(ctx.clone.documentElement, {
-        shadowRootElements: ctx.shadowRootElements
+        shadowRootElements: ctx.shadowRootElements,
+        forceShadowAsLightDOM: ctx.forceShadowAsLightDOM
       });
       // this is replacing serialized data tag with real tag
       html = html.replace(/(<\/?)data-percy-custom-element-/g, '$1');
@@ -719,20 +734,23 @@
         serializeCSSOM(ctx);
         serializeCanvas(ctx);
       }
-      for (const shadowHost of ctx.dom.querySelectorAll('[data-percy-shadow-host]')) {
-        let percyElementId = shadowHost.getAttribute('data-percy-element-id');
-        let cloneShadowHost = ctx.clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
-        if (shadowHost.shadowRoot && cloneShadowHost.shadowRoot) {
-          // getHTML requires shadowRoot to be passed explicitly
-          // to serialize the shadow elements properly
-          ctx.shadowRootElements.push(cloneShadowHost.shadowRoot);
-          serializeElements({
-            ...ctx,
-            dom: shadowHost.shadowRoot,
-            clone: cloneShadowHost.shadowRoot
-          });
-        } else {
-          ctx.warnings.add('data-percy-shadow-host does not have shadowRoot');
+      // Only process shadow hosts if forceShadowAsLightDOM is not enabled
+      if (!ctx.forceShadowAsLightDOM) {
+        for (const shadowHost of ctx.dom.querySelectorAll('[data-percy-shadow-host]')) {
+          let percyElementId = shadowHost.getAttribute('data-percy-element-id');
+          let cloneShadowHost = ctx.clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
+          if (shadowHost.shadowRoot && cloneShadowHost.shadowRoot) {
+            // getHTML requires shadowRoot to be passed explicitly
+            // to serialize the shadow elements properly
+            ctx.shadowRootElements.push(cloneShadowHost.shadowRoot);
+            serializeElements({
+              ...ctx,
+              dom: shadowHost.shadowRoot,
+              clone: cloneShadowHost.shadowRoot
+            });
+          } else {
+            ctx.warnings.add('data-percy-shadow-host does not have shadowRoot');
+          }
         }
       }
     }
@@ -764,7 +782,8 @@
         stringifyResponse = options === null || options === void 0 ? void 0 : options.stringify_response,
         disableShadowDOM = options === null || options === void 0 ? void 0 : options.disable_shadow_dom,
         reshuffleInvalidTags = options === null || options === void 0 ? void 0 : options.reshuffle_invalid_tags,
-        ignoreCanvasSerializationErrors = options === null || options === void 0 ? void 0 : options.ignore_canvas_serialization_errors
+        ignoreCanvasSerializationErrors = options === null || options === void 0 ? void 0 : options.ignore_canvas_serialization_errors,
+        forceShadowAsLightDOM = options === null || options === void 0 ? void 0 : options.force_shadow_dom_as_light_dom
       } = options || {};
 
       // keep certain records throughout serialization
@@ -776,7 +795,8 @@
         shadowRootElements: [],
         enableJavaScript,
         disableShadowDOM,
-        ignoreCanvasSerializationErrors
+        ignoreCanvasSerializationErrors,
+        forceShadowAsLightDOM
       };
       ctx.dom = dom;
       ctx.clone = cloneNodeAndShadow(ctx);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.31.2-beta.1",
+  "version": "1.31.2-beta.3",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "c8ba03fdd3ab7543f741a68eb5c357e38b48129e"
+  "gitHead": "761ef7aef1d13d45afb0cedae50e6e82d84a3521"
 }