I have a webpage with a modal with a custom dropdown under a shadowroot as follows:

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

For this, I want to add an event listener where if I click anywhere besides the dropdown, I hide the dropdown div. For this, I added the event listener as follows:

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

But this doesn't seem to work at all. I tried attaching the click event listener to the document, to check the event target as follows:

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

This event listener is triggered, but the target element 'e' it shown as the <div id="main"> irrespective of if I click on any element including the dropdown element under the modal. How do I add the event listener where I get the correct element under the shadowRoot which was clicked on using the 'click' event listener?