I'm using the lit framework to render my custom model-viewer element with a hidden 'close' button for a faux-fullscreen modal (the modal and close button are meant to only render on iOS). Excluding the unrelated attributes, the element is rendered using:

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

In the same file, I have the onModelLoaded function defined as follows:

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);
    }
}

Sadly it doesn't seem to update the display of the .modal-close div to display: fixed;, and it stays at display: none;. I've also tried using document.querySelectorAll<HTMLElement>('.modal-close') and this.shadowRoot?.querySelectorAll<HTMLElement>('.modal-close');.

I'm relatively new to lit so admittedly I'm using an odd mish-mash of vanilla js/ts and lit, but I can't seem to figure out how to update the style of the .modal-close div within my <model-viewer> shadowDOM custom element in my html. What am I missing?

EDIT: For a further question, I attempted defining the styles in my css stylesheet linked in my html, but regardless of what I attempted editing the style of an element in the shadow DOM directly in the CSS file (for the .modal-close class for example) never worked. I thought that regardless of it being in the shadow DOM, it is still the same class so the style should work, but apparently not. How could I attempt to do this so I can avoid inline CSS?