web-dev-qa-db-ja.com

シャドウルートとは

Google Chromeのデベロッパーツールでは、#shadow-rootタグのすぐ下に<html lang="en">が表示されます。それは何をし、何のために使用されますか？ FirefoxやIEには表示されません。 Chromeのみで、これは特別な機能ですか？

開くと、<head>と<body>とrevealという名前のリンクが表示され、クリックすることで<head>と<body>を指します。

htmlgoogle-chromedomgoogle-chrome-devtools
83
Andrew

これは、 Shadow DOM が存在することを示す特別なインジケータです。これらは長年にわたって存在していましたが、開発者は最近までAPIを与えられていませんでした。 Chromeにはしばらくの間この機能がありましたが、他のブラウザはまだ追いついています。 [要素]セクションの[DevTools設定]で切り替えることができます。 「Show User Agent Shadow DOM」のチェックを外します。これにより、少なくとも内部的に作成されたShadow DOM（select要素など）は隠されます。カスタム要素など、ユーザーが作成したものに影響するかどうかはすぐにわかりません。

これらはiframeなどにも現れます。iframeには、別のDOMツリーが別のツリー内にネストされています。

Shadow DOMは、ページの一部にownDOMが含まれていると単に言っています。スタイルとスクリプトはその要素内でスコープすることができるため、その中で実行されるものはその境界でのみ実行されます。

これは、 Webコンポーネント が機能するために必要な主要部分の1つです。これは、開発者が他のHTML要素と同じように使用できる独自のカプセル化されたコンポーネントを開発できる新しいテクノロジーです。

86
Garbee

Shadow DOMの例として、Webページに<video>タグがある場合、メインDOMにタグが1つだけ表示されますが、Shadow DOMを有効にすると、ビデオプレーヤーのHTML（player DOM）を表示できます。

Shadow DOM

これはこの記事で適切に説明されています http://webcomponents.org/articles/introduction-to-shadow-dom/

60
Rao

Webコンポーネントの場合、HTMLとJavaScriptで構築されたウィジェットを使いにくくするという根本的な問題があります。

問題：ウィジェット内のDOMツリーは、ページの残りの部分からカプセル化されていません。このカプセル化の欠如は、ドキュメントスタイルシートが誤ってウィジェット内のパーツに適用される可能性があることを意味します。 JavaScriptが誤ってウィジェット内のパーツを変更する可能性があります。 IDがウィジェット内のIDと重複する場合があります。

Shadow DOMは、DOMツリーのカプセル化の問題に対処します。

たとえば、次のようなマークアップがある場合：

<button>Hello, world!</button>
<script>
var Host = document.querySelector('button');
var root = Host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>

代わりに

Hello, world!

あなたのページは次のようになります

こんにちは、影の世界!

それだけでなく、ページ上のJavaScriptがボタンのtextContentが何であるかを尋ねた場合、“こんにちは、影の世界!”は取得されませんが、“Hello, world!”はシャドウルートの下のDOMサブツリーがカプセル化されるためです。

NOTE：上記のコンテンツを https://www.html5rocks.com/en/tutorials/webcomponents/shadowdomから取得しました/ シャドウDOMを理解するのに役立ったので、すでにここで答えているよりも少し良くなりました。ここに関連するコンテンツを追加して、他の人に役立つようにしましたが、詳細についてはリンクをご覧ください。

2
Aniket Thakur