この記事は編集レビューを必要としています。ぜひご協力ください。
サマリー
HTML <shadow> 要素は shadow DOM の insertion point として使用されます。shadow ホスト配下に複数の shadow ルートを生成する場合に使用します。これは通常の HTML としては役立ちません。Web Components で使用します。
| コンテンツカテゴリ | 透過的コンテンツ。 |
|---|---|
| 許可されたコンテンツ | フローコンテンツ。 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親コンテンツ | フローコンテンツを受け入れる要素。 |
| DOM インターフェース | HTMLShadowElement |
属性
この要素は グローバル属性 を含みます。
例
これは <shadow> 要素を使用したシンプルな例です。必要な要素がすべて 1 つの HTML ファイルに含まれています。
ノート： これは実験的な機能です。このコードを実行するには、これを表示するブラウザが Web Components をサポートしている必要があります。Enabling Web Components in Firefox を見てください。
<html>
<head></head>
<body>
<!-- この <div> は shadow ルートを含みます -->
<div>
<!-- この見出しは表示されません -->
<h4>My Original Heading</h4>
</div>
<script>
// 上記の <div> コンテンツを取得
var origContent = document.querySelector('div');
// 1 つ目の shadow ルートを生成
var shadowroot1 = origContent.createShadowRoot();
// 2 つ目の shadow ルートを生成
var shadowroot2 = origContent.createShadowRoot();
// 1 つ目の shadow ルートに要素を挿入
shadowroot1.innerHTML =
'<p>Older shadow root inserted by <shadow></p>';
// 2 つ目の shadow ルートに <shadow> を含めて挿入。
// 前のマークアップは <shadow> が使われるまで
// 表示されません
shadowroot2.innerHTML =
'<shadow></shadow> <p>Younger shadow root, displayed because it is the youngest.</p>';
</script>
</body>
</html>
ブラウザで表示した場合、次のように見えるはずです。
仕様
| 仕様 | 状態 | コメント |
|---|---|---|
| Shadow DOM shadow の定義 |
草案 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 35 | 28 (28)[1] | 未サポート | 26 | 未サポート |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 37 | 28.0 (28)[1] | 未サポート | ? | ? |
[1] Firefox で Shadow DOM が使用できない場合、<shadow> 要素は HTMLUnknownElement のようにふるまいます。Shadow DOM が最初に実装されたのは Firefox 33 で、既定では無効の dom.webcomponents.enabled を変更しないと使用できません。