JSFiddle - React, Tailwind, and code Playground

HTML

<object type="image/svg+xml" data="data:image/svg+xml, <?xml-stylesheet type='text/css' href='data:text/css, rect { fill:green; }'?><svg xmlns='http://www.w3.org/2000/svg'><rect x='5' y='5' width='50' height='50' /></svg>">
    Object fail
</object>

<button id="addStyle">Add stroke in second style sheet</button>

JavaScript

document.getElementById('addStyle').onclick = function(evt) {
    var svgDoc = window.frames[0].document;
    var procInstruction = svgDoc.createProcessingInstruction(
        "xml-stylesheet",
        "type='text/css', href='data:text/css, rect { stroke:black; }'"
        );
    svgDoc.insertBefore(procInstruction, svgDoc.children[0]);
};