Error using toPng with extra quote in HTML

[stickeegreg]

Use case: description, code

If the HTML has mangled quotes, for example <div id="x""> or <div id="x class="x"> then domtoimage.toPng will emit an Event with a type of error but no message.

jsfiddle

Expected behavior

Screenshot should be produced

Actual behavior (stack traces, console logs etc)

Event
    isTrusted: true
    bubbles: false
    cancelBubble: false
    cancelable: false
    composed: false
    currentTarget: null
    defaultPrevented: false
    eventPhase: 0
    returnValue: true
    srcElement: null
    target: null
    timeStamp: 11920.099999904633
    type: "error"
    [[Prototype]]: Event

Library version

3.1.6

Browsers

• Chrome 115
• Firefox 116

Workaround

Removing attributes names containing " before taking the screenshot will work around the problem

document.querySelectorAll('*')
    .forEach((element) => {
        const invalidAttributeNames = element.getAttributeNames()
            .filter(name => name.includes('"'));

        for (const name of invalidAttributeNames) {
            element.removeAttribute(name);
        }
    });