Estoy usando el marco iluminado para renderizar mi elemento de visor de modelo personalizado con un botón de 'cerrar' oculto para un modal de pantalla completa falsa (el modal y el botón de cerrar están destinados a renderizar solo en iOS). Excluyendo los atributos no relacionados, el elemento se representa usando:

 private [$renderModelViewer]() { return html` <model-viewer @load=${this[$onModelLoaded]}> <div class='modal-close' style="display: none;">X</div> </model-viewer> `; }

En el mismo archivo, tengo la función onModelLoaded definida de la siguiente manera:

 private [$onModelLoaded](e: CustomEvent) { try { if(MODEL_VIEWER_CONSTANTS.IS_IOS) { const modalCloseButton = this.renderRoot.querySelectorAll<HTMLElement>('.modal-close') modalCloseButton.forEach(button => { button.style.display =`block !important`; }) } catch (err) { errorReportingService.reportError(err); } }

Lamentablemente, no parece actualizar la visualización del div .modal-close para display: fixed; , y permanece en display: none; . También intenté usar document.querySelectorAll<HTMLElement>('.modal-close') y this.shadowRoot?.querySelectorAll<HTMLElement>('.modal-close'); .

Soy relativamente nuevo en lit, así que admito que estoy usando una mezcla extraña de vanilla js/ts y lit, pero parece que no puedo encontrar la manera de actualizar el estilo del div .modal-close dentro de mi <model-viewer> elemento personalizado shadowDOM en mi html. ¿Qué me estoy perdiendo?

EDITAR: para una pregunta adicional, intenté definir los estilos en mi hoja de estilo css vinculada en mi html, pero independientemente de lo que intenté editar el estilo de un elemento en el DOM de la sombra directamente en el archivo CSS (para la clase .modal-close por ejemplo) nunca funcionó. Pensé que, independientemente de que esté en el DOM de la sombra, sigue siendo la misma clase, por lo que el estilo debería funcionar, pero aparentemente no. ¿Cómo podría intentar hacer esto para poder evitar el CSS en línea?