Google Chromeの開発ツールでは、#shadow-root
の右に<html lang="en">
というタグがあります。それは何をし、それは何のために使用されていますか? FirefoxやIEでは表示されません。 Chromeでのみ、これは特別な機能ですか?影のルートとは
私はそれを開くと、それは<head>
と<body>
を示し、reveal
名前の横にあるリンクは、クリックすることで、それは、<head>
と<body>
に何もポイントません。
Google Chromeの開発ツールでは、#shadow-root
の右に<html lang="en">
というタグがあります。それは何をし、それは何のために使用されていますか? FirefoxやIEでは表示されません。 Chromeでのみ、これは特別な機能ですか?影のルートとは
私はそれを開くと、それは<head>
と<body>
を示し、reveal
名前の横にあるリンクは、クリックすることで、それは、<head>
と<body>
に何もポイントません。
Shadow DOMが存在することを示す特別な指標です。これらは何年も存在してきましたが、最近まで開発者にはAPIは一度も与えられていませんでした。 Chromeはこの機能をしばらく保有していますが、他のブラウザはまだ追いついています。 DevToolsの[設定]セクションの[要素]セクションで切り替えることができます。 「ユーザエージェントシャドーDOMを表示する」のチェックを外します。これは、少なくとも内部的に作成されたシャドーDOMを非表示にします(select要素など)。カスタム要素などのユーザー作成のものに影響を与えるかどうかはすぐにわかりません。
これらは、別のDOMツリーが別のDOMツリーの内部にネストされているiframeのようなものにも現れます。
シャドウDOMは、単にページの一部に自身の DOMが含まれていると言っています。その要素内でスタイルとスクリプトをスコープすることができ、その中で実行されるのはその境界内でのみ実行されます。
Web Componentsが動作するために必要な主要な部分の1つです。これは、開発者が他のHTML要素と同じように使用できる独自のカプセル化コンポーネントを開発者が作成できるようにする新しいテクノロジーです。
ウェブページに<video>
タグがある場合、そのタグはメインDOMに1つのタグとして表示されますが、シャドウDOMを有効にすると、動画プレーヤーのHTML (プレーヤーのDOM)。
これは、この記事では、適切に説明されて、http://webcomponents.org/articles/introduction-to-shadow-dom/
だから、どのように任意のプロジェクトのために、これらの作成したカスタム要素またはWebコンポーネントを使用することは明らか質問ですね? Polymerを使っているとしましょう... –