Shadow DOM について

・	Shadow DOM について
・	ShadowRoot を作成する
・	ShadowRoot 内のコンテンツについて
・	ShadowRoot の機能について
・	Element の追加機能について
・	<CONTENT> 要素について
・	<SHADOW> 要素について

前のページに戻る

Shadow DOM について

■Shadow DOM について

Shadow DOM は、Web Components 関連の機能です。（実験段階）

http://www.w3.org/TR/shadow-dom/ (Working Draft)

複雑な入れ子構造になっている DOM ツリーを、あたかも一体化した１つの要素であるかのように、取り扱えるようになります。

■ <VIDEO> 要素の実例

例えば、<VIDEO> 要素のコントロール部分は、Shadow DOM で実装されています。

内部には、DOM ツリーが存在しますが、隠匿されています。

<VIDEO> 要素は、あたかも一体化した１つの要素のように取り扱うことができます。

■ Shadow Host について

任意の要素は、ShadowRoot オブジェクトを作成する事ができます。

ShadowRoot の作成については、こちらで解説しています。

もし作成した場合、その任意の要素は、Shadow Host となります。

Shadow Host に子孫が存在する場合、それらは非表示な状態へと変化します。

■ ShadowRoot について

ShadowRoot は、DOM オブジェクトの一種です。

DocumentFragment インターフェースを継承しています。

主な機能については、こちらで解説しています。

■ Shadow ツリーについて

■ Shadow ツリーを構築する

ShadowRoot の、ノードリストに、任意の DOM オブジェクトを登録します。

ShadowRoot を最上位とした、Shadow ツリーを構築する事ができます。

Shadow ツリーは、基本的に JavaScript から動的に構築します。

<TEMPLATE> 要素を使って、静的に準備しておく事もできます。

■ Shadow Host の描画について

Shadow Host の子孫は、ブラウザに表示されなくなります。

かわりに、ShadowRoot 内の Shadow ツリーが表示されるようになります。

■ Shadow ツリーのカプセル化について

Shadow ツリーは、隠匿された状態となります。

旧世代の API では、ShadowRoot 内にアクセスする事はできません。

セレクタを使ったアクセス方法については、こちらで解説しています。

DOM API を使ったアクセス方法については、こちらで解説しています。

上に戻る

ShadowRoot を作成する

■ ShadowRoot オブジェクトを作成する

■ ShadowRoot オブジェクトを取得する

■ ShadowRoot オブジェクトを作成する

ShadowRoot オブジェクトを作成するには、createShadowRoot() メソッドを使用します。

ShadowRoot オブジェクトは、複数作成する事もできます。

最後に作成した ShadowRoot オブジェクトのみ、ブラウザに表示されます。

Element.createShadowRoot( ) :ShadowRoot

引数	Void	なし。
戻り値	ShadowRoot	ShadowRoot オブジェクトが得られる。

■作成例

ShadowRoot オブジェクトを作成し、Shadow ツリーを構築する


<html>
  <body>

    <div id="aaa" >
      <span style="color:#F00;">あいうえお</span>
    </div>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// ShadowRoot オブジェクトを作成する
	// ------------------------------------------------------------
	var shadow_root = element.createShadowRoot();

	// ------------------------------------------------------------
	// HTML 文字列をセットして、Shadow ツリーを構築する
	// ------------------------------------------------------------
	shadow_root.innerHTML = '<span style="color:#00F;">かきくけこ</span>';

    //-->
    </script>

  </body>
</html>

■ ShadowRoot オブジェクトを取得する

作成済みの ShadowRoot を取得するには、shadowRoot プロパティを使用します。

このプロパティからは、最も新しく作成したオブジェクトが得られます。

作成済みの ShadowRoot オブジェクトを取得する


// ------------------------------------------------------------
// 要素を作成する
// ------------------------------------------------------------
var element = document.createElement("div");

// ------------------------------------------------------------
// ShadowRoot オブジェクトを作成する
// ------------------------------------------------------------
var shadow_root0 = element.createShadowRoot();

// ------------------------------------------------------------
// ShadowRoot オブジェクトを取得する
// ------------------------------------------------------------
var shadow_root1 = element.shadowRoot;

// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(shadow_root1);
console.log(shadow_root0 === shadow_root1); // true

■ 過去に作成した ShadowRoot オブジェクトをすべて取得する

１つ古い ShadowRoot を取得するには、olderShadowRoot プロパティを使用します。

このプロパティは、単方向リストです。

順番に巡ると、過去に作成したすべての ShadowRoot オブジェクトにアクセスできます。

自身が最も古い ShadowRoot である場合、null 値が得られます。

過去に作成済みの ShadowRoot オブジェクトをすべて取得する


// ------------------------------------------------------------
// 要素を作成する
// ------------------------------------------------------------
var element = document.createElement("div");

// ------------------------------------------------------------
// ShadowRoot オブジェクトを複数作成する
// ------------------------------------------------------------
var shadow_root0 = element.createShadowRoot(); // 最も古い
var shadow_root1 = element.createShadowRoot();
var shadow_root2 = element.createShadowRoot(); // 最も新しい

// ------------------------------------------------------------
// ShadowRoot オブジェクトをすべて取得する
// ------------------------------------------------------------
// 最も新しい ShadowRoot オブジェクトを取得する
var shadow_root_c = element.shadowRoot;
// １つ古い ShadowRoot オブジェクトを取得する
var shadow_root_b = shadow_root_c.olderShadowRoot;
// １つ古い ShadowRoot オブジェクトを取得する
var shadow_root_a = shadow_root_b.olderShadowRoot;

// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(shadow_root0 === shadow_root_a); // true
console.log(shadow_root1 === shadow_root_b); // true
console.log(shadow_root2 === shadow_root_c); // true

// ------------------------------------------------------------
// while 文を使って順番にアクセスする
// ------------------------------------------------------------
// 最も新しい ShadowRoot オブジェクトを取得する
var shadow_root = element.shadowRoot;
while(shadow_root){

	// 出力テスト
	console.log(shadow_root);

	// １つ古い ShadowRoot オブジェクトを取得する
	shadow_root = shadow_root.olderShadowRoot;
}

上に戻る

ShadowRoot 内のコンテンツについて

■ Shadow ツリーを構築する（innerHTML）

■ Shadow ツリーを構築する（DOM API）

■ Shadow ツリーを構築する（TEMPLATE 要素）

■ Shadow ツリーにアクセスする（セレクタ）

■ Shadow ツリーにアクセスする（DOM API）

■ ShadowRoot 内のイベントについて

■ ShadowRoot 内のスタイルシートについて

■ ShadowRoot 内に Shadow ツリーを構築する

■ innerHTML プロパティを使用する

ShadowRoot は、innerHTML プロパティに対応しています。

「HTML 文字列」を指定して、Shadow ツリーを構築する事ができます。

HTML 文字列をセットして、Shadow ツリーを構築する


// ------------------------------------------------------------
// DIV 要素を作成する
// ------------------------------------------------------------
var element = document.createElement("div");

// ------------------------------------------------------------
// ShadowRoot オブジェクトを作成する
// ------------------------------------------------------------
var shadow_root = element.createShadowRoot();

// ------------------------------------------------------------
// HTML 文字列をセットして、Shadow ツリーを構築する
// ------------------------------------------------------------
shadow_root.innerHTML = '<span style="color:#c00; background:#fee;" >あいうえお</span>';

// ------------------------------------------------------------
// BODY 要素のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(element);

■ DOM API を使用する

ShadowRoot は、Node インターフェースを継承しています。

ShadowRoot のノードリストに、任意の DOM オブジェクトを登録します。

DOM API を使って、Shadow ツリーを構築する


// ------------------------------------------------------------
// DIV 要素を作成する
// ------------------------------------------------------------
var shadow_host = document.createElement("div");

// ------------------------------------------------------------
// ShadowRoot オブジェクトを作成する
// ------------------------------------------------------------
var shadow_root = shadow_host.createShadowRoot();

// ------------------------------------------------------------
// SPAN 要素を作成する
// ------------------------------------------------------------
var element = document.createElement("SPAN");

// ------------------------------------------------------------
// テキストノードを作成する
// ------------------------------------------------------------
var text_node = document.createTextNode("あいうえお");

// ------------------------------------------------------------
// ShadowRoot のノードリストに登録する
// ------------------------------------------------------------
shadow_root.appendChild(element);
element.appendChild(text_node);

// ------------------------------------------------------------
// BODY 要素のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(shadow_host);

■ <TEMPLATE> 要素を使用する

<TEMPLATE> タグ内に記述した子孫は、専用のサブツリーに登録されています。

これらの DOM オブジェクトは、不活性な状態となります。

例えば、<SCRIPT> 要素などは実行されません。

例えば、外部リソースへのアクセスは発生しません。

不活性な要素を動作させるには、通常のノードリストに再配置します。

<TEMPLATE> 要素内のコンテンツにアクセスするには、content プロパティを使用します。

DocumentFragment オブジェクトが得られます。

<TEMPLATE> 要素を使って、Shadow ツリーを構築する


<html>
  <body>

    <template id="my_template" >
      <span style="color:#c00; background:#fee;" >あいうえお</span> <br>
      <span style="color:#0c0; background:#efe;" >かきくけこ</span> <br>
      <span style="color:#c0c; background:#eef;" >さしすせそ</span> <br>
    </template>

    <div id="my_host" ></div>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// "my_template" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var template = document.getElementById("my_template");

	// ------------------------------------------------------------
	// "my_host" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var shadow_host = document.getElementById("my_host");

	// ------------------------------------------------------------
	// ShadowRoot オブジェクトを作成する
	// ------------------------------------------------------------
	var shadow_root = shadow_host.createShadowRoot();

	// ------------------------------------------------------------
	// テンプレート内のコンテンツを複製する
	// ------------------------------------------------------------
	var content = template.content.cloneNode(true);

	// ------------------------------------------------------------
	// 複製したコンテンツを ShadowRoot 内に配置する
	// ------------------------------------------------------------
	while(content.firstChild){
		shadow_root.appendChild(content.firstChild);
	}

    //-->
    </script>

  </body>
</html>

■ Shadow ツリーにアクセスする

■セレクタを使用する

セレクタについては、こちらで解説しています。

Shadow ツリーにアクセスするには、::shadow 擬似要素を使用します。

セレクタを使って、ShadowRoot 内にアクセスする


<html>
  <body>

    <style type="text/css" >

	#aaa {
		width:400px;
		height:300px;
		padding:5px;
		background:#fcc;
		border:10px solid #c88;
	}

	#aaa::shadow > #bbb {
		padding:5px;
		background:#ccf;
		border:10px solid #88c;
	}

    </style>

    <div id="aaa" >あいうえお</div>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// ShadowRoot オブジェクトを作成する
	// ------------------------------------------------------------
	var shadow_root = element.createShadowRoot();

	// ------------------------------------------------------------
	// HTML 文字列をセットして、Shadow ツリーを構築する
	// ------------------------------------------------------------
	shadow_root.innerHTML = '<div id="bbb" >かきくけこ</div>';

	// ------------------------------------------------------------
	// セレクタにマッチするエレメントを１つ取得する
	// ------------------------------------------------------------
	var shadow_element = document.querySelector( "#aaa::shadow > #bbb" );

	// ------------------------------------------------------------
	// エレメントがセレクタにマッチするか調べる
	// ------------------------------------------------------------
	var result = shadow_element.matches( "#bbb" );

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	console.log(shadow_element);
	console.log(result); // true
    //-->
    </script>

  </body>
</html>

■ DOM API を使用する

ShadowRoot は、Node インターフェースを継承しています。

ノードリストを巡って、Shadow ツリーにアクセスできます。

また、ShadowRoot は、以下のメソッドに対応しています。（一部抜粋）

メソッド名	説明
getElementById()	ID 属性からエレメントを取得する
getElementsByClassName()	クラス名属性からエレメントを取得する
getElementsByTagName()	タグ名からエレメントを取得する

■ ShadowRoot 内のイベントについて

■ ShadowRoot 内の伝達について

ShadowRoot 内で発生したイベントの詳細な情報は、ShadowRoot まで伝達されます。

■ Shadow Host から祖先への伝達について

ShadowRoot の外側への伝達は、カプセル化されます。

Shadow Host 自体にイベントが発生したかのように通知されます。

■ ShadowRoot のイベントについて

ShadowRoot は、イベントリスナーのみ対応しています。

Element ではないので、イベントプロパティはありません。

■イベントの伝達順序を確認する

ShadowRoot 内のイベントの伝達順序を確認する


<html>
  <body>

    <template id="my_template" >
      <form id="my_form">
        <input type="button" value="a" >
        <input type="button" value="b" >
        <input type="button" value="c" >
      </form>
    </template>

    <div id="my_host" ></div>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// DOM オブジェクトのすべての子孫を検索する関数
	// ------------------------------------------------------------
	function DomNodeFindAllDescendants(node,func){
		function f(n){
			var nodes = n.childNodes;
			var i;
			var num = nodes.length;
			var a = new Array();
			for(i=0;i < num;i++){ a[i] = nodes[i]; }
			for(i=0;i < num;i++){
				node = func(a[i]);
				if(node){ return node; }
				node = f(a[i]);
				if(node){ return node; }
			}
			return null;
		}
		return f(node);
	}

	// ------------------------------------------------------------
	// "my_template" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var template = document.getElementById("my_template");

	// ------------------------------------------------------------
	// "my_host" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var shadow_host = document.getElementById("my_host");

	// ------------------------------------------------------------
	// ShadowRoot オブジェクトを作成する
	// ------------------------------------------------------------
	var shadow_root = shadow_host.createShadowRoot();

	// ------------------------------------------------------------
	// テンプレート内のコンテンツを複製し、ShadowRoot 内に配置する
	// ------------------------------------------------------------
	var content = template.content.cloneNode(true);
	while(content.firstChild){
		shadow_root.appendChild(content.firstChild);
	}

	// ------------------------------------------------------------
	// クリックされたときに実行される関数
	// ------------------------------------------------------------
	function MouseClickFunc (e){
		console.log(" ----- ");
		console.log("phase  :" , e.eventPhase);
		console.log("current:" , e.currentTarget);
		console.log("target :" , e.target);
	}

	// ------------------------------------------------------------
	// リッスンを開始する（Shadow Host から祖先）
	// ------------------------------------------------------------
	window.addEventListener("click" , MouseClickFunc , true);
	window.addEventListener("click" , MouseClickFunc , false);
	document.addEventListener("click" , MouseClickFunc , true);
	document.addEventListener("click" , MouseClickFunc , false);

	DomNodeFindAllDescendants(document,function(node){
		node.addEventListener("click" , MouseClickFunc , true);
		node.addEventListener("click" , MouseClickFunc , false);
		return null;
	});

	// ------------------------------------------------------------
	// リッスンを開始する（ShadowRoot 内）
	// ------------------------------------------------------------
	shadow_root.addEventListener("click" , MouseClickFunc , true);
	shadow_root.addEventListener("click" , MouseClickFunc , false);

	DomNodeFindAllDescendants(shadow_root,function(node){
		node.addEventListener("click" , MouseClickFunc , true);
		node.addEventListener("click" , MouseClickFunc , false);
		return null;
	});

    //-->
    </script>

  </body>
</html>

■ ShadowRoot 内のスタイルシートについて

■外側から、ShadowRoot 内の要素にスタイルを適用する

セレクタに、::shadow 擬似要素を追加します。

■ ShadowRoot 内のスタイルシートについて

セレクタの検索範囲は、ShadowRoot 内に限定されます。

ShadowRoot 内のスタイルシートの適用範囲は、Shadow ツリーのみです。

■ ShadowRoot 内のスタイルシートをすべて取得する

styleSheets プロパティを使用します。

styleSheets プロパティから、CSSStyleSheetList オブジェクトが得られます。

スタイルシートについては、こちらで解説しています。

■ ShadowRoot 内のスタイルシートを確認する

ShadowRoot 内のスタイルシートを確認する


<html>
  <body>

    <template id="my_template" >

      <style type="text/css"> </style>
      <style type="text/css"> </style>
      <style type="text/css">
	#aaa{
		color:#c00; background:#fee;
	}
	#bbb{
		color:#0c0; background:#efe;
	}
	#ccc{
		color:#c0c; background:#eef;
	}
      </style>

      <div id="aaa" >あいうえお</div> <br>
      <div id="bbb" >かきくけこ</div> <br>
      <div id="ccc" >さしすせそ</div> <br>

    </template>

    <div id="my_host" ></div>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// "my_template" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var template = document.getElementById("my_template");

	// ------------------------------------------------------------
	// "my_host" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var shadow_host = document.getElementById("my_host");

	// ------------------------------------------------------------
	// ShadowRoot オブジェクトを作成する
	// ------------------------------------------------------------
	var shadow_root = shadow_host.createShadowRoot();

	// ------------------------------------------------------------
	// テンプレート内のコンテンツを複製し、ShadowRoot 内に配置する
	// ------------------------------------------------------------
	var content = template.content.cloneNode(true);
	while(content.firstChild){
		shadow_root.appendChild(content.firstChild);
	}

	// ------------------------------------------------------------
	// CSSStyleSheetList オブジェクトを取得する
	// ------------------------------------------------------------
	var sheet_list = shadow_root.styleSheets;

	// ------------------------------------------------------------
	// スタイルシートの総数を取得
	// ------------------------------------------------------------
	var num = sheet_list.length;

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	var i;
	for(i=0;i < num;i++){

		// CSSStyleSheet オブジェクトを取得する
		var style_sheet = sheet_list[i];

		// 出力テスト
		console.log(style_sheet);
	}

    //-->
    </script>

  </body>
</html>

上に戻る

ShadowRoot の機能について

■ ShadowRoot の機能について

■ ShadowRoot のプロパティ一覧

プロパティ名	型	説明
host	Element	Shadow Host に該当する要素を取得する
olderShadowRoot	ShadowRoot	１つ古い ShadowRoot オブジェクトを取得する
innerHTML	String	ShadowRoot 内のコンテンツを HTML 文字列で設定する
styleSheets	StyleSheetList	CSSStyleSheet オブジェクトのリストを取得する
activeElement	Element	ShadowRoot 内で、フォーカスを保持する要素を取得する

■ ShadowRoot のメソッド一覧（一部抜粋）

メソッド名	説明
getElementById()	ID 属性からエレメントを取得する
getElementsByClassName()	クラス名属性からエレメントを取得する
getElementsByTagName()	タグ名からエレメントを取得する
elementFromPoint()	クライアント座標を指定して、座標（点）と重なるエレメントを取得する
getSelection()	Selection オブジェクトを取得する

上に戻る

Element の追加機能について

■ Element の追加機能について

Element インターフェースには、以下の機能が追加されます。

■ Element の追加プロパティ一覧

プロパティ名	型	説明
shadowRoot	ShadowRoot	最も新しく作成した ShadowRoot オブジェクトを取得する

■ Element の追加メソッド一覧

メソッド名	説明
createShadowRoot()	ShadowRoot オブジェクトを作成する
getDestinationInsertionPoints()	自身の要素が、挿入ポイントによって代替表示されている場合、その挿入ポイント先を NodeList オブジェクト形式で取得する

上に戻る

<CONTENT> 要素について

■ <CONTENT> 要素について

■ <CONTENT> 要素の使用例

■ <CONTENT> 要素の機能について

■ <CONTENT> 要素について

<CONTENT> 要素は、ShadowRoot 内で使用します。

<CONTENT> 要素は、挿入ポイントの一種です。

■コンテント挿入ポイントについて

<CONTENT> 要素には、Shadow Host 内に存在する要素を、代替表示できます。

ShadowRoot を作成すると、Shadow Host の子孫は非表示な状態となりますが、<CONTENT> 要素を利用する事で、再び可視表示できるようになります。

■代替表示される要素について

代替表示される要素は、Shadow DOM としての恩恵はありません。

Shadow DOM ではなく、通常の DOM として動作します。

■ <CONTENT> 要素の使用例

■ <CONTENT> タグの記述例

<CONTENT> 要素の記述例（ShadowRoot 内で使用する）


<content select="*">
    セレクタとマッチする要素が存在しませんでした
</content>

■ select 属性値について

セレクタを指定します。

検索対象となるのは、Shadow Host の子孫のみです。

マッチした場合、<CONTENT> 要素には、マッチした要素が表示されます。

複数の要素がマッチする場合、順番にすべて表示されます。

マッチしなかった場合、<CONTENT> 要素の子孫が、そのまま表示されます。

既に別の場所で代替表示されている要素は、マッチしません。

■ <CONTENT> 要素の使用例

<CONTENT> 要素を使って、コンテンツを表示する


<html>
  <body>

    <div id="my_shadow_host" >

      <div id="aaa" >私はホストＡです</div>
      <div id="bbb" >私はホストＢです</div>

    </div>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// "my_shadow_host" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var shadow_host = document.getElementById("my_shadow_host");

	// ------------------------------------------------------------
	// ShadowRoot オブジェクトを作成する
	// ------------------------------------------------------------
	var shadow_root = shadow_host.createShadowRoot();

	// ------------------------------------------------------------
	// HTML 文字列を指定して Shadow ツリーを構築する
	// ------------------------------------------------------------
	shadow_root.innerHTML =
		'<content select="div#aaa">Ａが見つからなかった</content> <br>' +
		'<content select="div#bbb">Ｂが見つからなかった</content> <br>' +
		'<content select="div#ccc">Ｃが見つからなかった</content>';

	// ------------------------------------------------------------
	// ShadowRoot 内の content 要素を取得する
	// ------------------------------------------------------------
	var content_list = shadow_root.getElementsByTagName("content");
	var content0 = content_list[0];
	var content1 = content_list[1];
	var content2 = content_list[2];

	// ------------------------------------------------------------
	// content 要素に現在表示されている DOM オブジェクトを取得する
	// ------------------------------------------------------------
	console.log( content0.getDistributedNodes() );
	console.log( content1.getDistributedNodes() );
	console.log( content2.getDistributedNodes() );

	// ------------------------------------------------------------
	// Shadow Host 内にある要素を取得する
	// ------------------------------------------------------------
	var aaa = document.getElementById("aaa");
	var bbb = document.getElementById("bbb");

	// ------------------------------------------------------------
	// 代替表示されている場合、挿入ポイント先を取得する
	// ------------------------------------------------------------
	console.log( aaa.getDestinationInsertionPoints() );
	console.log( bbb.getDestinationInsertionPoints() );

    //-->
    </script>

  </body>
</html>

■ <CONTENT> 要素の機能について

■ <CONTENT> 要素のプロパティ一覧

プロパティ名	型	説明
select	String	代替表示したい Shadow Host 内の要素を、セレクタ形式で指定する。

■ <CONTENT> 要素のメソッド一覧

メソッド名	説明
getDistributedNodes()	自身に現在表示されている DOM オブジェクトを、NodeList 形式で取得する。代替表示に成功している場合、その要素が得られる。代替表示に失敗している場合、自身の子孫が得られる。

上に戻る

<SHADOW> 要素について

■ <SHADOW> 要素について

■ <SHADOW> 要素の使用例

■ <SHADOW> 要素の機能について

■ <SHADOW> 要素について

<SHADOW> 要素は、ShadowRoot 内で使用します。

<SHADOW> 要素は、挿入ポイントの一種です。

■シャドウ挿入ポイントについて

<SHADOW> 要素には、１つ古い ShadowRoot 内を、代替表示できます。

複数の ShadowRoot を作成すると、古い ShadowRoot は非表示な状態となりますが、<SHADOW> 要素を利用する事で、再び可視表示できるようになります。

■ <SHADOW> 要素の使用例

■ <SHADOW> タグの記述例

<SHADOW> 要素の記述例（ShadowRoot 内で使用する）


<shadow></shadow>

■ <SHADOW> 要素の使用例

<SHADOW> 要素を使って、コンテンツを表示する


<html>
  <body>

    <div id="my_shadow_host" >

      私はホスト内です

    </div>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// "my_shadow_host" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var shadow_host = document.getElementById("my_shadow_host");

	// ------------------------------------------------------------
	// ShadowRoot オブジェクトを複数作成する
	// ------------------------------------------------------------
	var shadow_root0 = shadow_host.createShadowRoot();
	var shadow_root1 = shadow_host.createShadowRoot();
	var shadow_root2 = shadow_host.createShadowRoot();

	// ------------------------------------------------------------
	// HTML 文字列を指定して Shadow ツリーを構築する
	// ------------------------------------------------------------
	shadow_root0.innerHTML = '私はシャドウＡです';
	shadow_root1.innerHTML = '私はシャドウＢです「 <shadow></shadow>」';
	shadow_root2.innerHTML = '私はシャドウＣです『 <shadow></shadow>』';

	// ------------------------------------------------------------
	// ShadowRoot 内の shadow 要素を取得する
	// ------------------------------------------------------------
	var shadow1 = shadow_root1.getElementsByTagName("shadow")[0];
	var shadow2 = shadow_root2.getElementsByTagName("shadow")[0];

	// ------------------------------------------------------------
	// shadow 要素に現在表示されている DOM オブジェクトを取得する
	// ------------------------------------------------------------
	console.log( shadow1.getDistributedNodes() );
	console.log( shadow2.getDistributedNodes() );

    //-->
    </script>

  </body>
</html>

■ <SHADOW> 要素の機能について

■ <SHADOW> 要素のメソッド一覧

メソッド名	説明
getDistributedNodes()	自身に現在表示されている DOM オブジェクトを、NodeList 形式で取得する。

上に戻る

前のページに戻る