Tengo una página web con un modal con un menú desplegable personalizado debajo de un shadowroot de la siguiente manera:

 <div id="main"> #shadow-root <div class="modal fade in" id="sample-modal"> <div class="modal-dialog modal-xl" role="dialog" aria-hidden="true"> <div class="modal-content"> <div class="modal-header"> <h6 class="modal-title" style="font-size:0.85rem" id="download-modal-label">Modal Title</h6> </div> <form onsubmit="return false;"> <div class="modal-body" id="modal-body" style="overflow: inherit !important"> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> <a href="#about">About</a> <a href="#base">Base</a> <a href="#blog">Blog</a> </div> </div> </div> </form> </div> </div> </div>

Para esto, quiero agregar un detector de eventos donde si hago clic en cualquier lugar además del menú desplegable, escondo el div desplegable. Para esto, agregué el detector de eventos de la siguiente manera:

 let root = document.getElementById("main").shadowRoot; $(root).on("click", function(e) { var clickedOn=$(e.target); });

Pero esto no parece funcionar en absoluto. Intenté adjuntar el detector de eventos de clic al documento para verificar el objetivo del evento de la siguiente manera:

 $(document).on("click", function(e) { var clickedOn=$(e.target); });

Este detector de eventos se activa, pero el elemento de destino 'e' se muestra como <div id="main"> independientemente de si hago clic en cualquier elemento, incluido el elemento desplegable debajo del modal. ¿Cómo agrego el detector de eventos donde obtengo el elemento correcto debajo de shadowRoot en el que se hizo clic con el detector de eventos 'clic'?