Проверьте, содержит ли элемент # shadow-root

Можно ли увидеть, существует ли теневой элемент DOM? Я не слишком заинтересован в том, чтобы манипулировать им или даже на самом деле нацеливаться на него. Я понимаю аргументацию инкапсуляции. Но я хотел бы иметь возможность создавать другие элементы в обычной DOM, основываясь на том, присутствует ли элемент Shadow DOM.

Вид вроде:

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

Или, если не для теневого корня, по крайней мере определенного элемента внутри, как id div. Поэтому, если этот div существует, то ясно, что элемент Shadow DOM находится на странице.

Я знаю, что это было бы не так просто... Из некоторых исследований, которые я сделал, есть такие вещи, как >>> и /deep/, но их поддержка кажется низкой/нет/устаревшей. Купите, может быть, другой способ, но неэлегантный он может быть?

Ответ 1

Если вы хотите проверить, имеет ли элемент определенный объект Shadow DOM, вы можете сделать следующее:

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

Вы также можете получить элемент DOM DOM, а затем работать с ним, как обычный node:

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 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

Ответ 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
  }
}