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

Question

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

有点像：

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

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

我知道事情不会那么简单...根据我所做的一些研究，有像>>>和/deep/这样的东西，但它们的支持似乎很低/没有/被弃用。也许还有另一种方式，不管它有多不雅观？

Answer 1

如果要检查特定于的元素是否正在承载open阴影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>

​

Answer 2

您可以使用属性shadowRoot访问元素的shadowRoot，因此可以遍历所有节点并检查该属性是否为空。

您可以使用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
    });

Answer 3

KevBot和Marko Kajzer的其他答案只适用于使用mode: 'open'创建的ShadowRoot。这里有一种检测元素是否有ShadowRoot的方法，即使根是封闭的。确保它在其他代码之前运行(在任何对attachShadow的调用之前)，否则在设置此代码时，它将无法捕获任何已经具有ShadowRoot的元素：

const shadowHosts = new WeakSet()

const original = Element.prototype.attachShadow

Element.prototype.attachShadow = function attachShadow(...args) {
    const result = original.apply(this, args)

    shadowHosts.add(this)

    return result
}

export function hasShadow(el) {
    return shadowHosts.has(el)
}

然后在任何元素上使用hasShadow

if (hasShadow(someElement)) {...}