<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>