From b7d7ba988484ccd8df8dcbf7dc8154187f4ae613 Mon Sep 17 00:00:00 2001 From: Wenyu Shi Date: Fri, 2 Aug 2024 13:01:23 +0100 Subject: [PATCH 1/2] capture slotted elements --- src/dom-to-image-more.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/dom-to-image-more.js b/src/dom-to-image-more.js index 45842fe9..f273f5c6 100644 --- a/src/dom-to-image-more.js +++ b/src/dom-to-image-more.js @@ -97,8 +97,8 @@ let restorations = []; return Promise.resolve(node) .then(ensureElement) - .then(function (clonee) { - return cloneNode(clonee, options, null, ownerWindow); + .then(function (clone) { + return cloneNode(clone, options, null, ownerWindow); }) .then(embedFonts) .then(inlineImages) @@ -439,8 +439,14 @@ function getRenderedChildren(original) { if (util.isShadowSlotElement(original)) { - return original.assignedNodes(); // shadow DOM has "assigned nodes" as rendered children + const childElement = [ + ...original.childNodes, // default child elements inside the named slot + ...original.assignedNodes(), // assigned node to the named slot + ]; + + return childElement; } + return original.childNodes; } } @@ -658,9 +664,13 @@ } function isInShadowRoot(value) { + // Object.prototype.hasOwnProperty.call(value, 'getRootNode') always is false + // MDN hasOwnProperty: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty + // hasOwnProperty returns a boolean indicating whether this object has the specified property as its own property + // getRootNode is inherited from the prototype chain, and defined on the Node prototype return ( value !== null && - Object.prototype.hasOwnProperty.call(value, 'getRootNode') && + 'getRootNode' in value && isShadowRoot(value.getRootNode()) ); } From 388e29dd91b413e1c30427a2ebf17a72324c99bf Mon Sep 17 00:00:00 2001 From: Wenyu Shi Date: Sat, 3 Aug 2024 00:07:52 +0100 Subject: [PATCH 2/2] update solution --- src/dom-to-image-more.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/dom-to-image-more.js b/src/dom-to-image-more.js index f273f5c6..09887e2b 100644 --- a/src/dom-to-image-more.js +++ b/src/dom-to-image-more.js @@ -97,8 +97,8 @@ let restorations = []; return Promise.resolve(node) .then(ensureElement) - .then(function (clone) { - return cloneNode(clone, options, null, ownerWindow); + .then(function (clonee) { + return cloneNode(clonee, options, null, ownerWindow); }) .then(embedFonts) .then(inlineImages) @@ -439,11 +439,13 @@ function getRenderedChildren(original) { if (util.isShadowSlotElement(original)) { - const childElement = [ - ...original.childNodes, // default child elements inside the named slot - ...original.assignedNodes(), // assigned node to the named slot - ]; + // default child elements inside the named slot + let childElement = original.childNodes; + if (original.assignedNodes().length > 0) { + // replace the default child elements when have assigned nodes + childElement = original.assignedNodes(); + } return childElement; }