Question

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

类似：

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

或者如果不是影子根，至少是一个特定的元素，比如div的id。因此，如果该div存在，那么很明显，Shadow DOM元素就在页面上。

我知道它不会那么简单......从我做过的一些研究中，有>>>和/deep/之类的东西，但它们的支持似乎很低/无/弃用。可能还有另外一种购买方式，不管它有多么优雅？

Answer 1

如果您想检查特定元素是否正在托管Shadow DOM元素，您可以执行以下操作：

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

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

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

以下是适用于最新版Chrome的示例：

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

<script>
    var host = document.querySelector('p');
    var root = host.createShadowRoot();
    root.textContent = 'A Shadow DOM Paragraph';

    // Let's go ahead and query it again so we can see this work in an actual scenario
    var p = document.querySelector('p');
    var div = document.querySelector('div');

    console.log('Paragraph has Shadow DOM:', (p.shadowRoot === root)); // true
    console.log('Div has Shadow DOM:', (div.shadowRoot === root)); // false
</script>

在所有这些例子中，我给了你严格的检查条件的方法。您当然可以执行以下操作：

if (el.shadowRoot) {} //to loosely check
if (!!el.shadowRoot) {} //to force boolean

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
    });

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

2 个答案: