2015-12-06 8 views
68

Google Chromeの開発ツールでは、#shadow-rootの右に<html lang="en">というタグがあります。それは何をし、それは何のために使用されていますか? FirefoxやIEでは表示されません。 Chromeでのみ、これは特別な機能ですか?影のルートとは

私はそれを開くと、それは<head><body>を示し、reveal名前の横にあるリンクは、クリックすることで、それは、<head><body>に何もポイントません。

答えて

71

Shadow DOMが存在することを示す特別な指標です。これらは何年も存在してきましたが、最近まで開発者にはAPIは一度も与えられていませんでした。 Chromeはこの機能をしばらく保有していますが、他のブラウザはまだ追いついています。 DevToolsの[設定]セクションの[要素]セクションで切り替えることができます。 「ユーザエージェントシャドーDOMを表示する」のチェックを外します。これは、少なくとも内部的に作成されたシャドーDOMを非表示にします(select要素など)。カスタム要素などのユーザー作成のものに影響を与えるかどうかはすぐにわかりません。

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

シャドウDOMは、単にページの一部に自身の DOMが含まれていると言っています。その要素内でスタイルとスクリプトをスコープすることができ、その中で実行されるのはその境界内でのみ実行されます。

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

+0

だから、どのように任意のプロジェクトのために、これらの作成したカスタム要素またはWebコンポーネントを使用することは明らか質問ですね? Polymerを使っているとしましょう... –

48

ウェブページに<video>タグがある場合、そのタグはメインDOMに1つのタグとして表示されますが、シャドウDOMを有効にすると、動画プレーヤーのHTML (プレーヤーのDOM)。


Shadow DOM


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