slot 要素shadow ツリーとして埋め込む

DOM における Shadow ツリーによって、name 属性をもつ slot 要素が、その name 属性値と同じ値をもつ slot 属性が指定された要素によって置き換えてレンダリングされます。

template 要素と組み合わせることで、より柔軟にテンプレートを使用することができます。

なお、Web Components に対応してないユーザーエージェントにおいては、代替コンテンツとして、slot 要素の内容が表示されます。

slot 要素の仕様

カテゴリ
コンテンツモデル
この要素を使用できる文脈
  • フレージングコンテンツが期待される場所。
この要素で使用できる属性

※ slot 要素における name 属性は Shadow ツリースロットの名前を定義します。

slot 要素のサンプルソース

<template id="sample-template">
  <style>
    h1 {
      font-size: 1.5rem;
      margin: 1em 0;
      padding-bottom: .5em;
      border-bottom: 1px solid #eee;
    }
    .contents {
      font-size: 1rem;
    }
  </style>
  <h1><slot name="sample-contents-01">タイトル</slot></h1>
  <div class="contents">
    <slot name="sample-contents-02"><p>コンテンツ</p></slot>
  </div>
</template>

<div id="sample">
  <span slot="sample-contents-01">持ち物リスト</span>
  <ul slot="sample-contents-02">
    <li>筆記用具</li>
    <li>身分証用の写真</li>
  </ul>
</div>

<script>
  var templete = document.getElementById('sample-template').content.cloneNode(true);
  var host = document.getElementById('sample');
  var root = host.attachShadow({mode: 'open'});
  root.appendChild(templete);
</script>

主要ブラウザの対応

仕様書の該当箇所

4.12.4 The slot element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ