@percy/dom 1.30.5-beta.1 → 1.30.5

package/dist/bundle.js

@@ -547,26 +547,27 @@
     /**
      * Use `getInnerHTML()` to serialize shadow dom as <template> tags. `innerHTML` and `outerHTML` don't do this. Buzzword: "declarative shadow dom"
      */
-    function getOuterHTML(docElement) {
-      // All major browsers in latest versions supports getHTML API to get serialized DOM
-      // https://developer.mozilla.org/en-US/docs/Web/API/Element/getHTML
-      // old firefox doesn't serialize shadow DOM, we're awaiting API's by firefox to become ready and are not polyfilling it.
-      // new firefox from 128 onwards serializes it using getHTML
-      /* istanbul ignore if: Only triggered in firefox <= 128 and tests runs on latest */
-      if (!docElement.getHTML) {
-        return docElement.outerHTML;
-      }
+    function getOuterHTML(docElement, {
+      shadowRootElements
+    }) {
       // chromium gives us declarative shadow DOM serialization API
       let innerHTML = '';
       /* 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
+        // https://developer.mozilla.org/en-US/docs/Web/API/Element/getHTML
         innerHTML = docElement.getHTML({
-          serializableShadowRoots: true
+          serializableShadowRoots: true,
+          shadowRoots: shadowRootElements
         });
       } else if (docElement.getInnerHTML) {
         innerHTML = docElement.getInnerHTML({
           includeShadowRoots: true
         });
+      } else {
+        // old firefox doesn't serialize shadow DOM, we're awaiting API's by firefox to become ready and are not polyfilling it.
+        // new firefox from 128 onwards serializes it using getHTML
+        return docElement.outerHTML;
       }
       docElement.textContent = '';
       // Note: Here we are specifically passing replacer function to avoid any replacements due to
@@ -594,7 +595,9 @@
 
     // Serializes and returns the cloned DOM as an HTML string
     function serializeHTML(ctx) {
-      let html = getOuterHTML(ctx.clone.documentElement);
+      let html = getOuterHTML(ctx.clone.documentElement, {
+        shadowRootElements: ctx.shadowRootElements
+      });
       // replace serialized data attributes with real attributes
       html = html.replace(/ data-percy-serialized-attribute-(\w+?)=/ig, ' $1=');
       // include the doctype with the html string
@@ -612,6 +615,9 @@
         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,
@@ -657,6 +663,7 @@
         warnings: new Set(),
         hints: new Set(),
         cache: new Map(),
+        shadowRootElements: [],
         enableJavaScript,
         disableShadowDOM
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.30.5-beta.1",
+  "version": "1.30.5",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "beta"
+    "tag": "latest"
   },
   "main": "dist/bundle.js",
   "browser": "dist/bundle.js",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "4951bc46ffffcd2fd5947f6aa88fd7eb68a34ef3"
+  "gitHead": "bf1c4a33777ea241f1f0256a70068d34983812a7"
 }