Mi problema es que, según cómo veo el proyecto que he creado, objectRef.contentDocument a veces devuelve un Document adecuado pero otras veces es null . Esto parece estar basado en si sirvo el proyecto desde un servidor web o simplemente abro el HTML como archivo.

Sin embargo, acostumbrémonos con el código: lo que estoy tratando de construir es un carrusel de imágenes con iconos SVG que cambian de color según la posición de desplazamiento como botones de navegación:

 <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>

Al inspeccionar esto en Chrome, se representa lo siguiente: como puede ver, se crea un documento dentro de la etiqueta del objeto:

Luego obtengo una referencia al album-carousel en JS y creo una nueva instancia de mi propia clase, solo después de que el DOM esté completamente cargado:

 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(...) arrojará un error cuando se abra como archivo, sin embargo, no cuando se abra a través del servidor web local integrado de IntelliJ, ¿o estoy buscando en el lugar equivocado aquí?