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

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

属性

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

name

スロットの名前です。

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

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

仕様書

Specification
HTML
# the-slot-element
DOM
# shadow-tree-slots

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
slot
name

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support