Shadow DOM要素が存在するかどうかを確認することは可能ですか?私はそれを操作することや、実際にそれをターゲットにすることすらあまり気にしません。カプセル化の理由を理解しています。ただし、Shadow DOM要素が存在するかどうかに基づいて、通常のDOMの他の要素のスタイルを設定できるようにしたいと思います。
のようなもの:
if ( $('#element-id #shadow-root').length ) {
// true
}
または、シャドウルートでない場合は、少なくともdivのIDなどの特定の要素。したがって、そのdivが存在する場合は、ShadowDOM要素がページ上にあることは明らかです。
それほど単純ではないことはわかっています...私が行ったいくつかの調査から、>>>
や/deep/
のようなものがありますが、それらのサポートは低い/なし/非推奨のようです。購入する別の方法があるかもしれませんが、それはエレガントではないかもしれませんか?
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
プロパティ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
});