html2canvas-pro icon indicating copy to clipboard operation
html2canvas-pro copied to clipboard

[Bug] Everything in `<slot>` is not rendered

Open hlysine opened this issue 10 months ago • 3 comments

Reproduction: https://jsfiddle.net/fu6hLzxm/1/

I checked the code and it seemed like the renderer supports slot elements. However, the DocumentCloner does not clone elements that are contained in slots.

hlysine avatar Feb 16 '25 13:02 hlysine

After some more investigation, this bug seems to be caused by slotElement.assignedNodes() returning an empty array in the following two places.

https://github.com/yorickshan/html2canvas-pro/blob/f84f057ac36aa2f48a5768c10051eaa6311cb663/src/dom/document-cloner.ts#L301-L305

https://github.com/yorickshan/html2canvas-pro/blob/f84f057ac36aa2f48a5768c10051eaa6311cb663/src/dom/node-parser.ts#L25-L26

[...slotElement.childNodes] seems to be more appropriate in these locations.


For those who come across the same issue, the current workaround is to run this before rendering the elements:

elementToRender.querySelectorAll('slot').forEach(slot => {
  slot.assignedNodes = () => [...slot.childNodes];
});

hlysine avatar Feb 16 '25 13:02 hlysine

Is this issue resolved yet?

RoastNest avatar Jun 03 '25 18:06 RoastNest

Reproduction: https://jsfiddle.net/fu6hLzxm/1/

I checked the code and it seemed like the renderer supports slot elements. However, the DocumentCloner does not clone elements that are contained in slots.

try to use this REPO fix all 🐞:https://github.com/qq15725/modern-screenshot

learner-dhx avatar Jun 19 '25 09:06 learner-dhx