检查元素是否包含#shadow-root

Question

是否可以查看 Shadow DOM 元素是否存在？我不太在意操纵它，甚至不太在意按说来真正瞄准它。我理解封装的原因。但我希望能够根据 Shadow DOM 元素是否存在来设置常规 DOM 中其他元素的样式。

有点像：

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

或者，如果不是针对 shadow-root，至少包含一个特定的元素，例如 div 的 id。所以如果那个 div 存在，那么很明显 Shadow DOM 元素就在页面上。

我知道它不会那么简单……根据我所做的一些研究，有一些东西像 >>> 和 /deep/ 但他们的支持似乎很低/没有/已弃用.购买也许还有另一种方式，但它可能不优雅？

原文由 Chase 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你想检查一个 特定 的元素是否托管了一个 开放 的 Shadow DOM 元素，你可以执行以下操作：

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

也可以获取 Shadow DOM 元素，然后像普通节点一样对其进行操作：

 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 = 'A Shadow DOM Paragraph. I overrode the content specified!';

console.log('Paragraph has Shadow DOM:', !!p.shadowRoot); // true
console.log('Div has Shadow DOM:', !!div.shadowRoot); // false

 <div>A Normal Div</div>
<p>A Normal Paragraph</p>

原文由 KevBot 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以访问具有属性 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
  }
}

随着 ES6 的加入，我们可以像这样做一些更简单的事情：

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

原文由 Marko Kajzer 发布，翻译遵循 CC BY-SA 4.0 许可协议