HTML `<slot>` ウェブコンポーネントスロット要素

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。

<slot> は HTML の要素で、ウェブコンポーネント内のプレースホルダーであり、コンポーネントが使用される際に自分自身でマークアップを埋めることができます。これにより、別個の DOM ツリーを生成し、それらを一緒に表示することが可能になります。

スロットには、プレーンテキスト、その他の HTML 要素、その他のウェブコンポーネントを入れることができます。また、スロットにはデフォルトのコンテンツを指定することもでき、ウェブコンポーネントが使用された際に、そのスロットに他のコンテンツが割り当てられていない場合、このデフォルトのコンテンツが表示されます。

属性

この要素にはグローバル属性があります。

name

スロットの名前です。名前付きスロットとは、name 属性を持つ <slot> 要素のことです。一方、名前なしスロットには name 属性がなく、名前はデフォルトで空文字列となります。

シャドウルートが名前付きスロットの割り当てを使用する場合、そのホストの最上位の子要素は、slot 属性に一致する名前を持つスロット内にレンダリングされます。スロット名はシャドウルートごとに固有のものです。同じ名前のスロットが 2 つある場合、一致する slot 属性を持つすべての要素は、最初のスロットにレンダリングされます。 slot 属性を持たないすべての最上位の子要素は、まず最初の無名の <slot> 要素（デフォルトスロットと呼ばれます）内でレンダリングされます。シャドウルートが手動スロット割り当てを使用している場合、name は効果がありません。

詳しくは、<template> 要素の shadowrootslotassignment および Element.attachShadow() をご覧ください。

例

基本的な使い方

この HTML は、<template> 要素内で、いくつかの名前付きスロットをどのように宣言できるかを示しています。なお、これらのスロットは、テンプレートがシャドウルート内で使用される場合にのみ、スロットとして機能することに注意してください。

html

<template id="element-details-template">
  <style>
    details {
      font-family: "Open Sans Light", "Helvetica", "Arial", sans-serif;
    }
    .name {
      font-weight: bold;
      color: #217ac0;
      font-size: 120%;
    }
    h4 {
      margin: 10px 0 -8px 0;
      background: #217ac0;
      color: white;
      padding: 2px 6px;
      border: 1px solid #cee9f9;
      border-radius: 4px;
    }
    .attributes {
      margin-left: 22px;
      font-size: 90%;
    }
    .attributes p {
      margin-left: 16px;
      font-style: italic;
    }
  </style>
  <details>
    <summary>
      <code class="name">
        &lt;<slot name="element-name">NEED NAME</slot>&gt;
      </code>
      <span class="desc"><slot name="description">NEED DESCRIPTION</slot></span>
    </summary>
    <div class="attributes">
      <h4>Attributes</h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr />
</template>

メモ: この完全な例は、 element-details で見ることができます（ライブ実行もご覧ください）。また、テンプレートとスロットの利用にも説明があります。

技術的概要

コンテンツカテゴリー	フローコンテンツ, 記述コンテンツ
許可されている内容	透過的コンテンツ
イベント	`slotchange`
タグの省略	なし。開始タグと終了タグの両方が必須です。
許可されている親要素	記述コンテンツを受け付ける任意の要素
暗黙の ARIA ロール	対応するロールなし
許可されている ARIA ロール	許可されている `role` なし
DOM インターフェイス	`HTMLSlotElement`