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

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