Why is shadowRoot null?

462 Views Asked by At

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

0

There are 0 best solutions below