My problem is that based on how I view the project I've built, objectRef.contentDocument sometimes returns a proper Document but other times null. This seems to be based on whether I serve the project from a webserver or simply open the HTML as file.

Let's get accustomed with the code though - what I'm trying to build is an image-carousel with SVG-icons that change color based on scroll position as navigation-buttons:

<div class="album-carousel">
    <div class="cover-container">
        <div class="cover"></div>
        ...
    </div>
    <object class="arrow left" data="assets/svg/arrow.svg" type="image/svg+xml"></object>
    <object class="arrow right" data="assets/svg/arrow.svg" type="image/svg+xml"></object>
</div>

When inspecting this in Chrome, the following actually gets rendered - as you see, a Document is created within the object-tag:

I then get a reference to the album-carousel in JS and create a new instance of my own class, only after the DOM is fully loaded:

class AlbumCarousel {
  elementRef;
  arrowLeft;
  arrowRight;

  constructor(elementRef, scrollBy = 3) {
    this.elementRef = elementRef;
    this.arrowLeft = elementRef.children[1];
    this.arrowRight = elementRef.children[2];

    const scrollRight = () => {
      // irrelevant code
    }

    this.arrowRight.contentDocument.addEventListener("click", scrollRight);

    if (this.compoundWidth > Number.parseInt(getComputedStyle(this.albumContainerRef).width)) {
      this.arrowRight.contentDocument.children[0].style.fill = colors.base;
    }
  }

}

this.arrowRight.contentDocument.addEventListener(...) will throw an error when opened as file, however not when opened through IntelliJ's built-in local webserver - or am I searching in the wrong place here?