Google Chrome のデベロッパー ツールで、タグの#shadow-rootすぐ下に表示されます<html lang="en">。これは何をするもので、何に使用されますか? Firefox や IE では表示されず、Chrome でのみ表示されます。これは特別な機能ですか?
これを開くと、<head>と、<body>および の横に という名前のリンクが表示されますreveal。クリックすると、 と が参照され、他には何も表示され<head>ませ<body>ん。
ベストアンサー1
これは、シャドウDOM存在します。これらは何年も前から存在していましたが、開発者には最近まで API が提供されていませんでした。Chrome にはしばらく前からこの機能があり、他のブラウザはまだ追いついています。これは、DevTools 設定の「要素」セクションで切り替えることができます。「ユーザー エージェント Shadow DOM を表示」のチェックを外します。これにより、少なくとも内部で作成された Shadow DOM (選択した要素など) が非表示になります。カスタム要素など、ユーザーが作成したものに影響するかどうかはすぐにはわかりません。
これらは、別の DOM ツリーが別の DOM ツリー内にネストされている iframe などにも発生します。
Shadow DOMは、ページの一部が自分のその中に DOM があります。スタイルとスクリプトはその要素内でスコープ設定できるため、その要素内で実行されるものはその境界内でのみ実行されます。
これは、Webコンポーネント動作します。これは、開発者が他の HTML 要素と同じように使用できる独自のカプセル化されたコンポーネントを構築できるようにする新しいテクノロジです。