HTML Tag Reference

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>

主要ブラウザの対応

関連する要素

仕様書の該当箇所

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

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