Javascript 检查元素是否包含阴影根

是否可以查看是否存在阴影DOM元素？我不太关心如何操纵它，甚至不太关心如何按照自己的说法将其作为目标。我理解封装的原因。但是我希望能够根据是否存在shadowdom元素，为常规DOM中的其他元素设置样式

有点像：

if ( $('#element-id #shadow-root').length ) {
    // true
}

或者，如果不是对于shadowroot，则至少是其中的一个特定元素，如div的id。因此，如果该div存在，那么显然该shadowdom元素位于页面上

---

我知道事情不会那么简单。。。根据我所做的一些研究，有些东西像>>>和/deep/但它们的支持率似乎很低/没有/不推荐。购买可能还有另一种方法，不管它多么不雅观？

如果要检查特定元素是否承载开放阴影DOM元素，可以执行以下操作：

var el = document.querySelector('#some-element');
if (!!el.shadowRoot) {
    // Then it is hosting an OPEN Shadow DOM element
}

您还可以获取shadowdom元素，然后像普通节点一样对其进行操作：

var shadowEl = el.shadowRoot;
// And for example:
console.log(shadowEl.innerHTML);

下面是一个在最新版本的Chrome中工作的示例：

const div=document.querySelector'div'； const p=document.querySelector'p'； const shadowRoot=p.attachShadow{mode:'open'} shadowRoot.textContent='阴影DOM段落。我覆盖了指定的内容！'； console.log“段落具有阴影DOM:”！！p、 阴影根；//符合事实的 console.log'Div有阴影DOM:'！！div.shadowRoot；//错误的 普通潜水艇

---

普通段落可以使用属性shadowRoot访问元素的shadowRoot，因此可以遍历所有节点并检查属性是否为null

可以使用document.getElementsByTagName'*'选择文档中的所有节点

总而言之，我们会有这样的东西：

var allNodes = document.getElementsByTagName('*');
for (var i = 0; i < allNodes.length; i++) {
  if(allNodes[i].shadowRoot) {
    // Do some CSS styling
  }
}

document.getElementsByTagName('*')
    .filter(element => element.shadowRoot)
    .forEach(element => {
        // Do some CSS styling
    });

---

是否要检测元素是否承载阴影DOM元素？或者这会有帮助吗？据我所知，给定shadow dom中的一个元素，通过表示shadow dom节点的js var，您可以确定该节点是否为shadow dom元素，并可以向下遍历它的树，或向上遍历它的树，直到它可能是非shadow元素的子元素，但没有该节点，由于js queryselector api无法单独以shadow dom为目标，因此我认为您无法做到您想做的事情asking@KevBot我想这就是op要问的，哈哈，如果不是我想知道，你知道怎么做吗？例如，在Chrome中找到一个用户名文本输入，你的登录已经保存在那里。即，当您访问登录页面时，用户名输入已经填写并检查。这是在阴影Dom中完成的。shadowdom是你的用户名，所以我想说，input>shadowdom存在吗？或者，如果无法以阴影dom为目标，可能会说input>div是否存在？因为输入中不会有div，除非shadowdom把它放在那里……谢谢你的回复，看起来不错！你的段落示例似乎确实有效。现在我正在进一步探讨这个问题，我认为您实际获取元素的示例才是我真正需要的。你知道为什么这看起来不起作用吗？我确实注意到，当您创建shadowroot时，它显示asshadowroot打开，而浏览器的是shadowroot用户代理。我希望这不是问题。仅供参考，CodePen现在有一个控制台。它的按钮在左下角。这是一个新特性…@Chase，看起来输入中没有阴影dom元素。试试这个。在尝试获取ShadowDOM元素的innerHTML之前，我添加了一些检查，以查看是否存在ShadowDOM元素。当我在启用show user agent shodow DOM的情况下检查它时，我在输入标记中看到了shadow root用户代理。你知道这和你的代码检查有什么不同吗？啊，我明白你的意思了。好的，一般来说，当人们使用shadowdom时，他们正在编写自己的实现，比如web组件。当您看到user agent shadow元素时，您看到的是该元素的浏览器构建。可以将输入元素想象为封装在一起的几个元素，这样您就可以将它放在页面上，只需使用一次。在这些场景下，还有一些别出心裁的事情正在发生。但基本上，用户代理是浏览器的影子DOM，出于安全考虑，它是不可访问的！我担心你会这么说。谢谢你解释这个区别。