I don't know if this is a bug, undefined behavior or what. But when loading an SVG in with the <object> element, JS and CSS are unpredictable when it comes to accessing child elements of that SVG. Best I show and example:

Here we have our test.svg:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect id="myrect" x="0" y="0" width="100" height="100" />
</svg>

And our test.html:

<object
    style = "max-width:300px"
    type  = "image/svg+xml"
    data  = "test.svg" />

Now when I load the page I can see the black rectangle. When I execute document.querySelector("svg") in the console it comes up null. However when I inspect element on the page and see that there is indeed an SVG in the dom, I execute that command again and this time it returns the svg.

Thus, without any modification the DOM managed to change itself for no reason. What is supposed to happen?

screenshot

Update regarding what browser I was using

I was using Brave Version 1.31.88 Chromium: 95.0.4638.69 (Official Build) (64-bit) while getting the above results. My firefox browser seems to provide a different result, that is the JS never has access to the SVG regardless if I inspect element or not.

Possible workaround (js only)

Using the getSVGDocument() function, I have the ability to modify the style.

document.querySelector("object").getSVGDocument().querySelector("#myrect").style="fill:red";

The above code works so long that you don't inspect element on the rectangle. Works all the time in firefox.

HOWEVER the above solution only works on a fresh download of the object data. If you try to refresh, the above script will not work...

OH MY LORD I DIDN'T REALIZE THE RABBIT HOLE OF CHROME/MOZILLA BUGS I'VE JUST ENTERED