1. ホーム
  2. html

[解決済み] シャドールートとは

2022-09-27 08:41:38

質問

Google Chrome のデベロッパーツールに #shadow-root のすぐ下に <html lang="en"> タグのすぐ下にあるのですが、これは何をするもので、何に使うものなのでしょうか?FirefoxやIEにはなく、Chromeにしかないのですが、これは特別な機能なのでしょうか?

を開くと <head> と表示され <body> という名前の横のリンクは reveal というリンクがあり、クリックすると <head><body> であり、それ以外はありません。

どのように解決するのですか?

これは、特殊なインジケータで シャドウDOM が存在することを示す特別なインジケータです。これらは何年も前から存在していましたが、最近まで開発者に API が提供されることはありませんでした。Chrome にはしばらくこの機能がありましたが、他のブラウザーはまだ追いついていないようです。この機能は、DevToolsの設定の["Elements"]セクションで切り替えることができます。Show User Agent Shadow DOM"のチェックを外してください。これにより、少なくとも内部で作成されたシャドウ DOM (select 要素など) は非表示になります。

これらは、iframe のような、別の DOM ツリーの中に別の DOM ツリーが入れ子になっているようなものにも当てはまります。

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

のために必要な主要な部分の 1 つです。 ウェブ コンポーネント を動作させるために必要な主要な部品のひとつです。これは、開発者が他の HTML 要素と同様に使用できる、独自のカプセル化されたコンポーネントを構築できる新しい技術です。