为何shadowRoot为空？KeePass插件相关DOM访问问题

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

我的浏览器启用了KeePass插件，该插件会在密码输入框上添加一个KeePass图标：

我希望在mouseleave事件触发时检测鼠标是否位于该KeePass图标上，但打印的shadowRoot和firstChild均为空，这是为什么？

原因分析 #

1. Shadow DOM的封闭性：浏览器扩展（比如KeePass）创建的Shadow DOM通常采用封闭模式，这种模式下外部脚本无法通过element.shadowRoot访问内部结构，开发者用这种方式保护插件的实现逻辑，避免外部代码干扰。
2. 事件目标指向偏差：鼠标移到KeePass图标上时，event.relatedTarget可能并未指向挂载Shadow DOM的元素，甚至插件图标本身并非通过Shadow DOM渲染——它可能是直接添加到页面的独立元素，只是你误以为它存在于Shadow DOM中。
3. 属性拼写错误：代码中出现了小写的shadowroot，正确属性名应为shadowRoot（首字母大写），不过即使修正拼写，若relatedTarget本身指向错误，依然无法获取有效内容。

替代解决方案 #

• 检测元素特征：直接通过event.relatedTarget的类名、ID等属性判断，比如KeePass图标通常带有特定类名（可在浏览器开发者工具中查看），用event.relatedTarget.classList.contains('目标类名')即可完成判断。
• 记录鼠标状态：监听wrapper的mouseover事件，记录鼠标是否悬停在插件元素上，在mouseleave触发时直接读取该状态判断。

内容的提问来源于stack exchange，提问作者Adam