<slot>

HTML の <slot> 要素 — ウェブコンポーネント技術の一部 — は、ウェブコンポーネント内で別な DOM ツリーを構築し、いっしょに表示することができる独自のマークアップを入れることができるプレイスホルダーです。

コンテンツカテゴリ フローコンテンツ, 記述コンテンツ
許可されている内容 透過的コンテンツ
イベント slotchange
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 Any element that accepts 記述コンテンツ
許可されている ARIA ロール なし
DOM インターフェイス HTMLSlotElement

属性

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

name
スロットの名前です。
名前付きスロットは、 <slot> 要素に name 属性が付きます。

例

<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>
      <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
    </summary>
    <div class="attributes">
      <h4>Attributes</h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr>
</template>

メモ: この完全な例は、要素の詳細で実際に動作しています (running liveライブ実行もご覧ください)。また、テンプレートとスロットの利用にも説明があります。

仕様書

仕様書 状態 備考
HTML Living Standard
<slot> の定義		 現行の標準
DOM
Slots の定義		 現行の標準

ブラウザーの互換性

BCD tables only load in the browser