slot要素 - スロット (slot.) | 離珠のHTMLでしぃ！

1.仕様

SLOT要素は、
スロットを作成します。

SLOT - - (%Phrasing)* -- slot. (Normal elements.) [Flow|Phrasing] --

slot

スロット (slot.)

種類

通常要素

カテゴリ

使用できるコンテキスト

フレージングコンテンツを受け入れる要素

フレージングコンテンツを受け入れる要素のコンテンツとして、使用できます。

フレージングコンテンツを受け入れる要素は、<body>要素, <section>要素, <nav>要素, <aside>要素, <article>要素, <h1>要素, <h2>要素, <h3>要素, <h4>要素, <h5>要素, <h6>要素, <header>要素, <footer>要素, <main>要素, <address>要素, <li>要素, <dt>要素, <dd>要素, <caption>要素, <th>要素, <td>要素, <form>要素, <fieldset>要素, <search>要素, <blockquote>要素, <figure>要素, <figcaption>要素, <div>要素, <dialog>要素, <p>要素, <pre>要素, <output>要素, <progress>要素, <meter>要素, <label>要素, <datalist>要素, <bdi>要素, <bdo>要素, <abbr>要素, <b>要素, <cite>要素, <code>要素, <data>要素, <dfn>要素, <em>要素, <i>要素, <kbd>要素, <mark>要素, <q>要素, <s>要素, <samp>要素, <small>要素, <span>要素, <strong>要素, <sub>要素, <sup>要素, <u>要素, <var>要素です。

コンテンツモデル

透過的コンテンツ

一部の要素は透明であると説明されており、そのコンテンツモデルの説明には「transparent」がある。透明な要素のコンテンツモデルは、その親要素のコンテンツモデルから派生します。「transparent」であるコンテンツモデルの部分で要求される要素は、透明な要素がそれ自身を見つける透明な要素の親のコンテンツモデルの部分で要求される要素と同じ要素です。

タグの省略

どちらのタグも省略できません。

コンテンツ属性

グローバル属性他

name属性: シャドウツリースロットの名前

DOM インターフェイス

HTMLSlotElement

[Exposed=Window]
interface HTMLSlotElement : HTMLElement {
lastReviewed;
[HTMLConstructor] constructor();
[CEReactions] attribute DOMString name;
sequence assignedNodes(optional AssignedNodesOptions options = {});
sequence assignedElements(optional AssignedNodesOptions options = {});
undefined assign((Element or Text)... nodes);
};

HTMLElement

[Exposed=Window]
interface HTMLElement : Element {
[HTMLConstructor] constructor();
// metadata attributes
[CEReactions] attribute DOMString title;
[CEReactions] attribute DOMString lang;
[CEReactions] attribute boolean translate;
[CEReactions] attribute DOMString dir;
// user interaction
[CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
[CEReactions] attribute DOMString inert;
undefined click();
[CEReactions] attribute DOMString accessKey;
readonly attribute DOMString accessKeyLabel;
[CEReactions] attribute boolean draggable;
[CEReactions] attribute boolean spellcheck;
[CEReactions] attribute DOMString writingSuggestions;
[CEReactions] attribute DOMString autocapitalize;
[CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
[CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
ElementInternals attachInternals();
// The popover API
undefined showPopover();
undefined hidePopover();
boolean togglePopover(optional boolean force);
[CEReactions] attribute DOMString? popover;
};
HTMLElement includes GlobalEventHandlers;
HTMLElement includes ElementContentEditable;
HTMLElement includes HTMLOrSVGElement;

Element

[Exposed=Window]
interface Element : Node {
readonly attribute DOMString? namespaceURI;
readonly attribute DOMString? prefix;
readonly attribute DOMString localName;
readonly attribute DOMString tagName;
[CEReactions] attribute DOMString id;
[CEReactions] attribute DOMString className;
[SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
[CEReactions, Unscopable] attribute DOMString slot;
boolean hasAttributes();
[SameObject] readonly attribute NamedNodeMap attributes;
sequence<DOMString> getAttributeNames();
DOMString? getAttribute(DOMString qualifiedName);
DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
[CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
[CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
[CEReactions] undefined removeAttribute(DOMString qualifiedName);
[CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
[CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
boolean hasAttribute(DOMString qualifiedName);
boolean hasAttributeNS(DOMString? namespace, DOMString localName);
Attr? getAttributeNode(DOMString qualifiedName);
Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
[CEReactions] Attr? setAttributeNode(Attr attr);
[CEReactions] Attr? setAttributeNodeNS(Attr attr);
[CEReactions] Attr removeAttributeNode(Attr attr);
ShadowRoot attachShadow(ShadowRootInit init);
readonly attribute ShadowRoot? shadowRoot;
Element? closest(DOMString selectors);
boolean matches(DOMString selectors);
boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
HTMLCollection getElementsByTagName(DOMString qualifiedName);
HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
HTMLCollection getElementsByClassName(DOMString classNames);
[CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
undefined insertAdjacentText(DOMString where, DOMString data); // legacy
};

GlobalEventHandlers

interface mixin GlobalEventHandlers {
attribute EventHandler onabort;
attribute EventHandler onauxclick;
attribute EventHandler onbeforeinput;
attribute EventHandler onbeforematch;
attribute EventHandler onbeforetoggle;
attribute EventHandler onblur;
attribute EventHandler oncancel;
attribute EventHandler oncanplay;
attribute EventHandler oncanplaythrough;
attribute EventHandler onchange;
attribute EventHandler onclick;
attribute EventHandler onclose;
attribute EventHandler oncontextlost;
attribute EventHandler oncontextmenu;
attribute EventHandler oncontextrestored;
attribute EventHandler oncopy;
attribute EventHandler oncuechange;
attribute EventHandler oncut;
attribute EventHandler ondblclick;
attribute EventHandler ondrag;
attribute EventHandler ondragend;
attribute EventHandler ondragenter;
attribute EventHandler ondragleave;
attribute EventHandler ondragover;
attribute EventHandler ondragstart;
attribute EventHandler ondrop;
attribute EventHandler ondurationchange;
attribute EventHandler onemptied;
attribute EventHandler onended;
attribute OnErrorEventHandler onerror;
attribute EventHandler onfocus;
attribute EventHandler onformdata;
attribute EventHandler oninput;
attribute EventHandler oninvalid;
attribute EventHandler onkeydown;
attribute EventHandler onkeypress;
attribute EventHandler onkeyup;
attribute EventHandler onload;
attribute EventHandler onloadeddata;
attribute EventHandler onloadedmetadata;
attribute EventHandler onloadstart;
attribute EventHandler onmousedown;
[LegacyLenientThis] attribute EventHandler onmouseenter;
[LegacyLenientThis] attribute EventHandler onmouseleave;
attribute EventHandler onmousemove;
attribute EventHandler onmouseout;
attribute EventHandler onmouseover;
attribute EventHandler onmouseup;
attribute EventHandler onpaste;
attribute EventHandler onpause;
attribute EventHandler onplay;
attribute EventHandler onplaying;
attribute EventHandler onprogress;
attribute EventHandler onratechange;
attribute EventHandler onreset;
attribute EventHandler onresize;
attribute EventHandler onscroll;
attribute EventHandler onscrollend;
attribute EventHandler onsecuritypolicyviolation;
attribute EventHandler onseeked;
attribute EventHandler onseeking;
attribute EventHandler onselect;
attribute EventHandler onslotchange;
attribute EventHandler onstalled;
attribute EventHandler onsubmit;
attribute EventHandler onsuspend;
attribute EventHandler ontimeupdate;
attribute EventHandler ontoggle;
attribute EventHandler onvolumechange;
attribute EventHandler onwaiting;
attribute EventHandler onwebkitanimationend;
attribute EventHandler onwebkitanimationiteration;
attribute EventHandler onwebkitanimationstart;
attribute EventHandler onwebkittransitionend;
attribute EventHandler onwheel;
};

ElementContentEditable

interface mixin ElementContentEditable {
[CEReactions] attribute DOMString contentEditable;
[CEReactions] attribute DOMString enterKeyHint;
readonly attribute boolean isContentEditable;
[CEReactions] attribute DOMString inputMode;
};

HTMLOrSVGElement

interface mixin HTMLOrSVGElement {
[SameObject] readonly attribute DOMStringMap dataset;
attribute DOMString nonce; // intentionally no [CEReactions]
[CEReactions] attribute boolean autofocus;
[CEReactions] attribute long tabIndex;
undefined focus(optional FocusOptions options = {});
undefined blur();
};

ARIA in HTML

暗黙的="No" ARIAロール="No" aria-* 属性="No"

暗黙的な ARIAセマンティクスがありませんが、意味はあり、この意味は、ARIA によって提供されず、ARIA のユーザーに公開されていないロール、状態、プロパティで表現される可能性があります。

作成者は、暗黙的な ARIAセマンティクス, または HTML要素のネイティブセマンティクスを上書きしてはいけません。

記述できる aria-* 属性はありません。

レンダリング

ブロックボックス

フローコンテンツ

slot {
display: contents;
}

CSS を大雑把に読むと、などになります。

説明

slot要素は、スロットを作成します。

slot要素は、（コンテンツを受け取るための）スロットを定義します。
通常は、シャドウツリー内で使用されます。
スロット要素は、割り当てられたノードがあればそれを表示し、なければ自分の内容を表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>slot要素の例 - (Example of slot element) | 離珠のHTMLでしぃ！</title>
<meta name="author" content="コータン (KOUTAN)">
<template id="JTP001">
<p>てんぷれーとのさんぷる</p>
<slot name="nslJs002"></slot>
</template>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("JDV002").attachShadow({mode:"open"}).appendChild(document.getElementById("JTP001").content.cloneNode(true));
});
</script>
<link rel="icon" href="../favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body>
<h1>slot要素の例</h1>
<div id="JDV002">
<p slot="nslJs002">すろっとのさんぷる。</p>
<p>この例の template要素は、「てんぷれーとのさんぷる」というテキストの段落を用意しています。</p>
</div>
</body>
</html>

このサンプルへのリンクです。
(./exslot.htm)

参照元

HTML Living Standard. 4.12.4 The slot element (最終更新日 2025年8月29日)
HTML Living Standard. 15 Rendering 15.3.3 Flow content (最終更新日 2025年8月29日)
HTML 5.3 W3C 初公開ワーキングドラフト. 10. Rendering 10.3.3. Flow content (W3Cワーキングドラフト、2017年12月14日)
HTML 5.2 W3C 勧告. 10.3.3. Flow content (W3C勧告、2017年12月14日)
MDN Web Docs. HTML <slot>: ウェブコンポーネントのスロット要素

JSONデータ

JSON形式での、データのイメージです。

{
"slot": {
"group": "Scripting",
"element": "- - (%Phrasing)* -- slot. (Normal elements.) [Flow|Phrasing] --",
"attlist": {
"%Global;": "",
"name": "CDATA #IMPLIED -- Name of shadow tree slot --",
},
"summary": "スロット (slot.)",
"point": "スロットを作成します。",
"description": [
"（コンテンツを受け取るための）スロットを定義します。",
"通常は、シャドウツリー内で使用されます。",
"スロット要素は、割り当てられたノードがあればそれを表示し、なければ自分の内容を表示します。",
],
"elementKind": "Normal",
"categories": [
"Flow",
"Phrasing",
],
"canUsedContexts": "parent %Phrasing",
"contentModel": "%Transparent",
"tagOmission": [
"-",
"-",
],
"rendering": "Flow",
"domInterface": "HTMLSlotElement",
"contentAttributes": {"name": "シャドウツリースロットの名前"},
"reference": [
{
"title": "HTML Living Standard. 4.12.4 The slot element. Last Updated 29 August 2025",
"href": "https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element",
"heading": "HTML Living Standard. 4.12.4 The slot element",
"sub": "最終更新日 2025年8月29日",
},
{
"title": "HTML Living Standard. 15 Rendering 15.3.3 Flow content. Last Updated 29 August 2025",
"href": "https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3",
"heading": "HTML Living Standard. 15 Rendering 15.3.3 Flow content",
"sub": "最終更新日 2025年8月29日",
},
{
"title": "HTML 5.3 W3C Working Draft. 10.3.3. Flow content. W3C First Public Working Draft, 14 December 2017",
"href": "https://www.w3.org/TR/2017/WD-html53-20171214/rendering.html#non-replaced-elements-flow-content",
"heading": "HTML 5.3 W3C 初公開ワーキングドラフト. 10. Rendering 10.3.3. Flow content",
"sub": "W3Cワーキングドラフト、2017年12月14日",
},
{
"title": "HTML 5.2 W3C Recommendation. 10.3.3. Flow content. W3C Recommendation, 14 December 2017.",
"href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#non-replaced-elements-flow-content",
"heading": "HTML 5.2 W3C 勧告. 10.3.3. Flow content",
"sub": "W3C勧告、2017年12月14日",
},
{
"title": "MDN Web Docs. HTML <slot>: The Web Component Slot element.",
"href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/slot",
"heading": "MDN Web Docs. HTML <slot>: ウェブコンポーネントのスロット要素",
},
],
"version": {
"first": "HTML Living Standard",
"latest": "HTML Living Standard",
},
"lastReviewed": "2025-08-31",
"obsoleteAttributes": [
],
}
}

注意: 簡易に描画する為に、各項目の後ろに , を付与しています。JSON の形式では、末尾の項目の後には , は付けません。

最終確認日

2025-08-31

2.使用できるコンテキスト

slot要素は、
フレージングコンテンツを
受け入れる要素に
配置できます。

<slot>要素が使用できるコンテキスト(Context・文脈)は、フレージングコンテンツを受け入れる要素のコンテンツとしてです。ただし<slot>要素は Shadow DOM 内 (シャドールート内) で使う為のものなので、それなりの位置に配置すべきです。<template>要素はコンポーネントのマークアップを定義する為に使われる事が多いですが、<slot>要素の祖先として必須ではありません。

フレージングコンテンツをコンテンツの一部として配置できる要素は、以下の各要素です。

template

slot

<head>
<meta charset="utf-8">
<title>離珠のHTMLでしぃ！</title>
<template>
<slot name="nsl201"></slot>
</template>
</head>

<slot>要素は、フレージングコンテンツを受け入れる要素に配置できます。

<slot>要素は、（コンテンツを受け取るための）スロットを定義します。通常は、シャドウツリー内で使用されます。受け取るコンテンツが配置として適切な箇所に、<slot>要素を配置するのが良いでしょう。

3.コンテンツモデル

slot要素は、
親要素の内容として
適切なコンテンツが
配置できます。

<slot>要素の子や子孫としてどのようなコンテンツ(Content・内容) が含まれなければならないかというと、「透過的」です。

別の言い方で細かく言うと、<slot>要素は、親要素のコンテンツモデルそのままで配置できるので、フレージングコンテンツを配置できます。親要素がフローコンテンツも配置できる場合は、フローコンテンツも配置できます。尚、条件付きでフローコンテンツを配置できる要素もあるので、詳細は個別の要素で確認が必要です。

コンテンツモデルで「透過的」(transparent) とは、その透明な要素のコンテンツモデルは、その透明な要素の親要素のコンテンツモデルから派生するという事です。つまり、「透明」であるコンテンツモデルの部分に必要な要素は、透明な要素が含まれる透明な要素の親のコンテンツモデルの部分に必要な要素と同じです。

<slot>要素は Shadow DOM 内 (シャドールート内) で使う為のものなので、それなりの位置に配置されます。その子孫として配置できるかが、<slot>要素のコンテンツとして配置できるかに関わってきるので、注意が必要です。

4.コンテンツ属性

slot要素は、
グローバル属性と、
name属性を
配置できます。

<slot>要素に指定することができる属性は、グローバル属性と name属性です。

name属性

<slot name="nslJs001">

name属性は、シャドウツリースロットの名前を設定にします。name属性には、任意の文字列値を含める事ができます。

name属性は、スロットを他の要素に割り当てる為に使用されます。name属性を持つ<slot>要素は、その要素にそのname属性の値と一致するslot属性があり、その<slot>要素が、対応するslot属性値を持つルートのホストを持つシャドウツリーの子である場合に、任意の要素が割り当てられる名前付きスロットを作成します。

slot属性は、グローバル属性であり、slot IDL属性は、Element インターフェイスにて定義されています。

5.DOM インターフェイス

slot要素を、
直接表す
プロパティは
ありません。

<slot>要素を JavaScript などで操作するには、documentのquerySelectorAll()メソッドを用いて要素セレクタと属性セレクタでslot[name='nslJs001']などと指定して、<slot>要素のリストを取得する方法があります。この時に取得できる値の形式はHTMLSlotElement インターフェイスのリストです。

getElementById()メソッドを用いる方法もありますが、スクリプトで一意に特定して処理する時点で、スロットを用いる必要性があるのか疑問です。

このページのスロットの name は、 〇〇です。

すろっとのさんぷる。

<template id="JTP501">
<slot name="nsl504">スロットのサンプル</slot>
</template>
<p>このページのスロットの name は、
<code id="JCD503">〇〇</code>です。</p>
<script>
document.addEventListener("DOMContentLoaded", function() {
let _loJsList = document.createElement("ol");
let _llJsTemplate = document.querySelectorAll("template");
for (var _lnJsIdx01 = 0; _lnJsIdx01 < _llJsTemplate.length; _lnJsIdx01++) {
let _llJsSlot = _llJsTemplate[_lnJsIdx01].content.querySelectorAll("slot");
for (var _lnJsIdx02 = 0; _lnJsIdx02 < _llJsSlot.length; _lnJsIdx02++) {
_loJsList.appendChild(document.createElement("li")).appendChild(document.createElement("span")).textContent = _llJsSlot[_lnJsIdx02].getAttribute("name");
}
}
if (_loJsList.childElementCount) {
document.getElementById("JCD503").textContent = "";
}
document.getElementById("JCD503").appendChild(_loJsList);
});
</script>
<p slot="nsl504">すろっとのさんぷる。</p>
<hr>
<div id="JDV502"></div>

<slot>要素の一覧を取り出す例示です。<slot>要素は全て<template>要素の子孫の位置に記述する前提での例示です。<template>要素の子孫として記述した要素は、DOM 内のtemplateの子ではなく、<template>要素の content IDL 属性によって返される DocumentFragment の子です。つまり、DOMツリー内には<template>要素の子孫として記述した要素はない為、 document.querySelectorAll("slot") では、<template>要素の子孫として記述した<slot>要素は対象外となります。

6.アクセシビリティ

slot要素の
暗黙的な
ARIAセマンティクスは
ありません。

<slot>要素の暗黙的なARIAセマンティクスは、ありません。
No corresponding role とマークされている要素は、ARIAの暗黙的なセマンティクスを持ちませんが、意味を持ちます。この意味は、ARIAでは提供されていないロール、ステート、プロパティで表現され、アクセシビリティAPIを介して支援技術のユーザに公開される場合があります。したがって、リストされている要素のセマンティクスを上書きするのではなく、divやspanなどのセマンティクス的に中立な要素にロール属性を追加することをお勧めします。

作成者が<slot>要素に明示的に指定可能なARIA ロール（役割）は、No role (役割なし) です。作成者は暗黙的なARIAセマンティクスまたは HTML 要素のネイティブセマンティクスを上書きしてはならないことを表します。

指定できる aria-*属性はありません。

つまり、<slot>要素の役割はなく、作成者は、ARIA ロール値と aria-* 属性を<slot>要素に指定出来ないという事です。

7.レンダリング

slot {
display: contents;
}

<slot>要素のユーザーエージェントレベルのスタイルシートデフォルトでは、displayプロパティの値は contents であり、要素自体はボックスを生成しませんが、その子要素と疑似要素は通常通りボックスとテキストシーケンスを生成します。ボックス生成とレイアウトのために、要素は要素ツリー内でその内容（ソースドキュメント内の子要素と、::before 疑似要素や ::after 疑似要素など、通常通り子要素の前後に生成される疑似要素の両方を含む）によって置き換えられたかのように扱われます。

8.気を付ける点

何故、slot要素を用いるのか
意図を理解して
記述しましょう

<slot>要素は、HTMLの１要素であり、HTML文書に書くものです。その上で、スクリプトで操作するためのものなので、スクリプト側の都合も関係してきます。

当然の事ながらスクリプトを用いると、その分のデータ量が増えますし、処理時間も増えます。<slot>要素の採用の意図をよく考えて、用いましょう。

9.付記

何故、slot要素を用いるのか？
何故、スクリプトを用いるのか？
何故、HTML作成時に処理できないのか？
よく考えましょう。

スクリプトを用いなければ、その知識も環境も必要ありません。 HTML文書の作成を簡単にする事が目的であるならば、無理にスクリプトを使う事で、別の部分で面倒になります。 HTML文書の作成自体のツールもあるので、よく考えましょう。

次は、「canvas要素」です。
ビットマップキャンバスをスクリプトに提供する、canvas要素に関してのメモ書きです。
前のページの「noscript要素」はこちらです。
上位のページの「スクリプティング」はこちらです。