非推奨
この機能は Web 標準から削除されました。まだサポートしているプラウザーがあるかもしれませんが、ゆくゆくはなくなるものです。新旧にかかわらず、プロジェクトでの使用をやめてください。この機能を使用するページ、Web アプリはいつ動かなくなってもおかしくありません。
HTML の <content> 要素は insertion point として Shadow DOM 内で使用されています。 通常の HTML での使用は意図されていません。Web Components で使用されています。現在では <slot> 要素に置き換えられています。
注記: 初期のドラフト仕様に存在し、いくつかのブラウザーで実装されていましたが、この要素は仕様から削除されました。
| コンテンツカテゴリ | トランスパレント |
|---|---|
| 許可された内容 | |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | フローコンテンツを受け入れるすべての要素 |
| DOM インターフェイス | HTMLContentElement |
属性
この要素はグローバル属性を持ちます。
- select
- カンマ区切りで複数のセレクターを指定できます。これらは CSS セレクターと同じ文法です。
<content>要素が指定された場所に挿入する内容を指定します。
例
以下に <content> 要素の使用例を示します。これは必要なものがすべて含まれている HTML ファイルです。
注記: 以下のコードを動作させるには、ブラウザーが Web Components をサポートしている必要があります。 Firefox で Web Components を有効にするには の記事も参照してください。
<html>
<head></head>
<body>
<!-- The original content accessed by <content> -->
<div>
<h4>My Content Heading</h4>
<p>My content text</p>
</div>
<script>
// Get the <div> above.
var myContent = document.querySelector('div');
// Create a shadow DOM on the <div>
var shadowroot = myContent.createShadowRoot();
// Insert into the shadow DOM a new heading and
// part of the original content: the <p> tag.
shadowroot.innerHTML =
'<h2>Inserted Heading</h2> <content select="p"></content>';
</script>
</body>
</html>
ブラウザーで表示した場合、以下のように表示されます。
仕様
| 仕様 | 策定状況 | コメント |
|---|---|---|
| Shadow DOM content の定義 |
草案 |
ブラウザー実装状況
| 機能 | 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] Shadow DOM が Firefox で有効になっていない場合、<content> 要素は HTMLUnknownElement 要素のように振る舞います。Shadow DOM は Firefox 33 から実装され、環境設定の dom.webcomponents.enabled で有効となります。これはデフォルトでは disabled となっています。