<slot>

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

コンテンツカテゴリ フローコンテンツ, 記述コンテンツ
許可されている内容 透過的コンテンツ
イベント slotchange
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 Any element that accepts 記述コンテンツ
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール 許可されている role なし
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>

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

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser