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

Baseline Widely available

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

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

属性

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

name

スロットの名前です。

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

例

html

<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>        &lt;<slot name="element-name">NEED NAME</slot>&gt;      </code>      <span><slot name="description">NEED DESCRIPTION</slot></span>    </summary>    <div>      <h4>Attributes</h4>      <slot name="attributes"><p>None</p></slot>    </div>  </details>  <hr /></template>

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

技術的概要

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