<content>

非推奨
この機能は 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>

ブラウザーで表示した場合、以下のように表示されます。

content example

仕様

仕様 策定状況 コメント
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 となっています。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: dskmori, masa100
 最終更新者: dskmori,