HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<slot>
スロット要素。Web Components の Shadow DOM 内で、マークアップを外部から挿入するためのプレースホルダーとして機能します。
info
概要
<slot> 要素は、主に **Web Components** の技術において、**Shadow DOM** の内部に外部のHTMLコンテンツを挿入するための「プレースホルダー」として使用されます。
これにより、コンポーネントの構造（Shadow DOM内）とコンテンツ（Light DOM/外部）を分離し、柔軟な再利用性を実現します。
play_circle
デモ (静的表示)
HTML (Source)
<!-- <my-card>というカスタム要素を想定 -->
<my-card>
<h3 slot="title">カードのタイトル</h3>
<p>これはデフォルトスロットのコンテンツです。</p>
</my-card>
<!-- <my-card>の Shadow DOM 内 (コードサンプルでは表示されません) -->
<!-- <h2><slot name="title"></slot></h2> -->
<!-- <div class="content"><slot></slot></div> -->
Preview (Result)
※この要素はWeb Components内でのみ機能するため、静的プレビューでは意図した結果が表示されません。
[カスタム要素の表示エリア]
（カスタム要素の内部構造を想定）
（カスタム要素の内部構造を想定）
カードのタイトル
これはデフォルトスロットのコンテンツです。
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| name | スロットの名前を指定します。この属性がない場合、**デフォルトスロット**として機能し、名前のないすべてのコンテンツを受け入れます。 名前が指定されている場合、その名前と一致する slot 属性を持つ要素を受け入れます。
|
code
実用例
1. デフォルトスロット（名前なし）
<!-- Shadow DOM 内 -->
<div class="wrapper">
<p>メインコンテンツ:</p>
<slot>コンテンツが提供されない場合のデフォルト</slot>
</div>
2. 名前付きスロット
<!-- Shadow DOM 内 -->
<header>
<slot name="header">ヘッダーコンテンツ</slot>
</header>
<main>
<slot></slot> <!-- デフォルトスロット -->
</main>
3. 外部からのコンテンツ挿入（カスタム要素の使用）
<my-custom-element>
<h1 slot="header">カスタムヘッダー</h1>
<p>カスタム要素のメインボディ</p>
</my-custom-element>
lightbulb
知っておくべき重要事項
engineering
Web Components 専用要素
<slot> 要素は、**Shadow DOM** を利用する Web Components のコンポーネントテンプレート内でのみ意味を持ちます。通常のDOMのマークアップ内で単独で使用しても、特別なレンダリング結果は生み出しません。
visibility
デフォルトコンテンツ
<slot> 要素内にコンテンツ（例: <slot>コンテンツが提供されない場合のデフォルト</slot>）を記述すると、コンポーネントの利用者がコンテンツを提供しなかった場合に、そのコンテンツが表示されます。これはフォールバック（代替）コンテンツとして機能します。