Question

如何检查影子DOM中的元素是否为阴影根？

我尝试if (elem===elem.getRootNode())但这不起作用，因为一个是元素，一个是节点。

什么是正确的测试？

我的情况是，我的代码是一个Chrome扩展程序，可以从执行elem = elem.parentElement的给定元素爬上DOM树，直到elem===document.documentElement。

我现在正在尝试扩展上述测试条件以适用于shadow DOM中的元素。当从影子DOM中的元素爬上时，我想在到达影子DOM的根而不是整个页面的根时结束。

我只需要Chrome解决方案。

Answer 1

elem.getRootNode()返回元素的根Node。因此，如果您在Shadow DOM中，elem.getRootNode()将返回元素的ShadowRoot节点。

您可以根据元素的类型检查元素是否为ShadowRoot。

elem instanceof ShadowRoot

这是一个带有搜索根的函数的例子。没用，因为有getRootNode，仅用于演示。

function findShadowRoot(element){
  if(element instanceof ShadowRoot) return element;
  if(!element.parentNode) return null;
  return findShadowRoot(element.parentNode);
}

var shadow = document.querySelector('#element-hote').attachShadow({mode: "open"});
shadow.innerHTML = '<p><span id="inner">Inner shadow text!</span></p>';
var inner = shadow.querySelector('#inner');
console.dir(inner.getRootNode().innerHTML)
console.dir(findShadowRoot(inner).innerHTML);
console.log(inner.getRootNode() == findShadowRoot(inner))

<html>
  <head></head>
  <body>
    <p id="element-hote"></p>
  </body>
</html>

检查元素是否是影子dom中的根文档

1 个答案: