comment obtenir une référence à shadowRoot qui contient un élément donné ?

Question

J'utilise des composants web.

J'ai un arbre de nœuds comme ceci, tel que décrit par l'inspecteur des outils de développement de chrome :

<div>
-- <my-fancy-custom-elem> (this is the web component)
---- #shadow-root
------ <div class="button-container">
-------- <button class="a-button-in-a-web-comp">

Je suis en mesure d'obtenir une référence à la <button> par le biais d'un écouteur d'événements initié en dehors de la classe du composant web.

Similaire à ceci :

document.addEventListener("click", (event) => {
   const clickedElem = event.composedPath()[0]
   if(clickedElem.matches('.a-button-in-a-web-comp')){
     console.log(clickedElem.parentNode.parentNode)
   }
});

Je peux obtenir une référence à la #shadow-root en appelant clickedElem.parentNode.parentNode . Cependant, je cherche un moyen d'obtenir de manière fiable l'ancêtre shadow-Root de ce fichier. <button> peu importe la profondeur de l'arbre où il vit. Et même si je ne sais pas à quelle profondeur dans l'arbre il vit.

En d'autres termes, je cherche un moyen de renvoyer de manière fiable le premier Shadow-Root qui contient l'élément X, lorsque je dispose d'une référence à X.