From b7d7ba988484ccd8df8dcbf7dc8154187f4ae613 Mon Sep 17 00:00:00 2001 From: Wenyu Shi Date: Fri, 2 Aug 2024 13:01:23 +0100 Subject: [PATCH] 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()) ); }