@percy/dom 1.30.9 → 1.30.10-beta.0

package/dist/bundle.js

@@ -498,6 +498,29 @@
      */
 
     const ignoreTags = ['NOSCRIPT'];
+
+    /**
+     * if a custom element has attribute callback then cloneNode calls a callback that can
+     * increase CPU load or some other change.
+     * So we want to make sure that it is not called when doing serialization.
+    */
+    function cloneElementWithoutLifecycle(element) {
+      if (!element.attributeChangedCallback || !element.tagName.includes('-')) {
+        return element.cloneNode(); // Standard clone for non-custom elements
+      }
+      const cloned = document.createElement('data-percy-custom-element-' + element.tagName);
+
+      // Clone attributes without triggering attributeChangedCallback
+      for (const attr of element.attributes) {
+        // handle src separately
+        if (attr.name.toLowerCase() === 'src') {
+          cloned.setAttribute('data-percy-serialized-attribute-src', attr.value);
+        } else {
+          cloned.setAttribute(attr.name, attr.value);
+        }
+      }
+      return cloned;
+    }
     function cloneNodeAndShadow(ctx) {
       let {
         dom,
@@ -520,7 +543,7 @@
 
           // mark the node before cloning
           markElement(node, disableShadowDOM);
-          let clone = node.cloneNode();
+          let clone = cloneElementWithoutLifecycle(node);
 
           // Handle <style> tag specifically for media queries
           if (node.nodeName === 'STYLE' && !enableJavaScript) {
@@ -549,6 +572,7 @@
 
           // shallow clone should not contain children
           if (clone.children) {
+            /* istanbul ignore next */
             Array.from(clone.children).forEach(child => clone.removeChild(child));
           }
 
@@ -640,6 +664,8 @@
       let html = getOuterHTML(ctx.clone.documentElement, {
         shadowRootElements: ctx.shadowRootElements
       });
+      // this is replacing serialized data tag with real tag
+      html = html.replace(/(<\/?)data-percy-custom-element-/g, '$1');
       // replace serialized data attributes with real attributes
       html = html.replace(/ data-percy-serialized-attribute-(\w+?)=/ig, ' $1=');
       // include the doctype with the html string

package/package.json

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