0

I am trying to access a shadow root element. Here is my html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
  <div style="padding:20px;background-color:grey" id="wrapper">
        <input type="password">
  <div>
  
  <script>
  const wrapper = document.getElementById('wrapper');
  wrapper.addEventListener("mouseleave", function(event){
    console.log('mouseleave');
    console.log(event.relatedTarget);
    console.log(event.relatedTarget.shadowroot);
    console.log(event.relatedTarget.shadowRoot);
  });
  </script>
  </body>
</html>

On my browser, I have keepass plugin enabled, which adds a keepass icon on the input element:

enter image description here

I would like to detect, if the mouse is on the keepass icon when the mouseleave event is triggered, but why is shadowRoot empty? Also firstChild is empty aswell:

enter image description here

Adam
  • 25,960
  • 22
  • 158
  • 247
  • 1
    [shadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot) element property is null if the associated shadow root was attached with its mode set to `closed`. – n-- Sep 29 '22 at 07:43
  • So how can I identify that I am hovering over this keepass icon? – Adam Sep 29 '22 at 07:56
  • Just attach the listener to the host element or do the matching of host in your current listener. – n-- Sep 29 '22 at 08:05
  • @n-- not sure what you mean with host element? The problem with this shadowRoot element is that its inserted by a browser plugin. I originally come from here: https://stackoverflow.com/questions/73891129/how-to-prevent-mouse-leave-for-plugin-icon?noredirect=1#comment130473972_73891129 – Adam Sep 29 '22 at 10:39

0 Answers0