web-dev-qa-db-ja.com

要素に＃shadow-rootが含まれているかどうかを確認します

Shadow DOM要素が存在するかどうかを確認することは可能ですか？私はそれを操作することや、実際にそれをターゲットにすることすらあまり気にしません。カプセル化の理由を理解しています。ただし、Shadow DOM要素が存在するかどうかに基づいて、通常のDOMの他の要素のスタイルを設定できるようにしたいと思います。

のようなもの：

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

または、シャドウルートでない場合は、少なくともdivのIDなどの特定の要素。したがって、そのdivが存在する場合は、ShadowDOM要素がページ上にあることは明らかです。

それほど単純ではないことはわかっています...私が行ったいくつかの調査から、>>>や/deep/のようなものがありますが、それらのサポートは低い/なし/非推奨のようです。購入する別の方法があるかもしれませんが、それはエレガントではないかもしれませんか？

javascriptcssshadow-dom
13
Chase

specific要素が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
5
KevBot

プロパティ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
    });
5
Marko Kajzer