@percy/dom 1.32.11-beta.0 → 1.32.11-beta.2

package/dist/bundle.js

@@ -102,6 +102,9 @@
         try {
           let inputId = elem.getAttribute('data-percy-element-id');
           let cloneEl = clone.querySelector(`[data-percy-element-id="${inputId}"]`);
+          // no counterpart in the clone means the element wasn't serialized — e.g.
+          // light DOM content no <slot> projected, which the browser doesn't render
+          if (!cloneEl) continue;
           switch (elem.type) {
             case 'checkbox':
             case 'radio':
@@ -295,12 +298,12 @@
           try {
             cloneEl.setAttribute('srcdoc', p.createHTML ? p.createHTML(serialized.html) : serialized.html);
           } catch {}
-          cloneEl.removeAttribute('src');
+          cloneEl === null || cloneEl === void 0 || cloneEl.removeAttribute('src');
 
           // delete inaccessible frames built with js when js is disabled because they
           // break asset discovery by creating non-captured requests that hang
         } else if (!enableJavaScript && builtWithJs) {
-          cloneEl.remove();
+          cloneEl === null || cloneEl === void 0 || cloneEl.remove();
         }
       }
     }
@@ -590,6 +593,10 @@
           // skip empty canvases
           if (!dataUrl || dataUrl === 'data:,') continue;
 
+          // no counterpart in the clone means the canvas wasn't serialized — e.g.
+          // light DOM content no <slot> projected, which the browser doesn't render
+          if (!clone.querySelector(`[data-percy-element-id=${percyElementId}]`)) continue;
+
           // create a resource for the canvas data
           let resource = resourceFromDataURL(percyElementId, dataUrl);
           resources.add(resource);
@@ -627,6 +634,9 @@
           if (video.getAttribute('poster')) continue;
           let videoId = video.getAttribute('data-percy-element-id');
           let cloneEl = clone.querySelector(`[data-percy-element-id="${videoId}"]`);
+          // no counterpart in the clone means the element wasn't serialized — e.g.
+          // light DOM content no <slot> projected, which the browser doesn't render
+          if (!cloneEl) continue;
           let canvas = document.createElement('canvas');
           let width = canvas.width = video.videoWidth;
           let height = canvas.height = video.videoHeight;
@@ -1424,6 +1434,7 @@
       // clones shadow DOM and light DOM for a given node
       let cloneNode = (node, parent) => {
         try {
+          var _node$getRootNode;
           let walkTree = (nextn, nextp) => {
             while (nextn) {
               if (!ignoreTags.includes(nextn.nodeName)) {
@@ -1438,6 +1449,25 @@
             return;
           }
 
+          // Slotted content lives in the host's light DOM and is only *rendered* at
+          // the slot's position by the shadow root. Flattening the root away leaves
+          // an inert <slot> and strands that content outside its container, so
+          // resolve the projection here instead (PER-10812). Every shadow root is
+          // flattened when forceShadowAsLightDOM is set, so any slot belonging to
+          // one needs resolving — including slots reached indirectly, as projected
+          // content nested inside another component's slotted markup. The slot
+          // itself never renders and isn't cloned.
+          if (forceShadowAsLightDOM && node.nodeName === 'SLOT' && typeof node.assignedNodes === 'function' && (_node$getRootNode = node.getRootNode()) !== null && _node$getRootNode !== void 0 && _node$getRootNode.host) {
+            for (let assigned of node.assignedNodes({
+              flatten: true
+            })) {
+              if (!ignoreTags.includes(assigned.nodeName)) {
+                cloneNode(assigned, parent);
+              }
+            }
+            return;
+          }
+
           // mark the node before cloning
           markElement(node, disableShadowDOM, forceShadowAsLightDOM);
           let clone = cloneElementWithoutLifecycle(node);
@@ -1483,8 +1513,10 @@
           // clone shadow DOM (including closed shadow roots captured via CDP
           // and stored on window.__percyClosedShadowRoots)
           let nodeShadowRoot = node.shadowRoot || getClosedShadowRoot(node);
+          let flattenedHost = false;
           if (nodeShadowRoot && !disableShadowDOM) {
-            if (forceShadowAsLightDOM) {
+            flattenedHost = !!forceShadowAsLightDOM;
+            if (flattenedHost) {
               // When forceShadowAsLightDOM is true, treat shadow content as normal DOM
               walkTree(nodeShadowRoot.firstChild, clone);
             } else {
@@ -1503,8 +1535,12 @@
             }
           }
 
-          // clone light DOM
-          walkTree(node.firstChild, clone);
+          // clone light DOM — skipped for a flattened host, whose light children were
+          // already placed at their <slot> positions above. Children assigned to no
+          // slot are dropped, matching what the browser renders for them: nothing.
+          if (!flattenedHost) {
+            walkTree(node.firstChild, clone);
+          }
         } catch (err) {
           if (!err.handled) {
             handleErrors(err, 'Error cloning node: ', node);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.32.11-beta.0",
+  "version": "1.32.11-beta.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "db20253878f6ee43d2c277698ba021ae41adaa86"
+  "gitHead": "a05b0ac1efc0d136fa15c2330b55e1e207c6e797"
 }