シャドールートとは
回答:
これはShadow DOMが存在することを示す特別なインジケーターです。これらは何年も存在していますが、開発者は最近までAPIを提供されていませんでした。Chromeにはしばらくの間この機能がありましたが、他のブラウザはまだ追いついています。[要素]セクションのDevTools設定で切り替えることができます。[ユーザーエージェントのシャドウDOMを表示する]をオフにします。これにより、少なくとも内部で作成されたすべてのShadow DOMが非表示になります（選択要素など）。カスタム要素などのユーザー作成のものに影響するかどうかは、すぐにはわかりません。
これらは、別の内部にネストされた個別のDOMツリーを持っているiframeのようなものにも現れます。
Shadow DOMは、ページの一部が独自の DOMを持っていると単純に言っています。スタイルとスクリプトはその要素内でスコープを設定できるため、その中で実行されるものはその境界でのみ実行されます。
これは、Webコンポーネントが機能するために必要な主要な要素の1つです。これは、開発者が他のHTML要素と同じように使用できる独自のカプセル化されたコンポーネントを構築できる新しいテクノロジです。
Shadow DOMの例として、<video>Webページにタグがある場合、メインDOMで1つのタグとして表示されますが、Shadow DOMを有効にすると、ビデオプレーヤーのHTML（プレーヤーDOM）を表示できます。
これについては、この記事http://webcomponents.org/articles/introduction-to-shadow-dom/で適切に説明されています
Webコンポーネントの場合、HTMLとJavaScriptから構築されたウィジェットを使いにくくする根本的な問題があります。
問題：ウィジェット内のDOMツリーがページの他の部分からカプセル化されていません。このカプセル化の欠如は、ドキュメントスタイルシートがウィジェット内のパーツに誤って適用される可能性があることを意味します。JavaScriptが誤ってウィジェット内のパーツを変更する可能性があります。IDがウィジェット内のIDと重複する場合があります。
シャドウ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サブツリーがカプセル化されているので。
注：https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/から上記のコンテンツをピックアップしました。これは、シャドウDOMを理解するのに役立つため、すでにここにある回答よりも少しだけ良いものです。他にも役立つように関連コンテンツをここに追加しましたが、詳細についてはリンクを参照してください。