<slot>
<slot>は、Shadow DOM内にプレースホルダーを配置し、コンポーネントの利用者がLight DOMからカスタムコンテンツを挿入できるようにするHTML要素です。名前付きスロットを使用することで、複数の挿入ポイントを定義できます。Web Componentsの柔軟な再利用性を実現する中核的な仕組みであり、コンポーネント設計の要です。
概要
<slot>は、Shadow DOM内にプレースホルダーを配置し、コンポーネントの利用者がLight DOMからカスタムコンテンツを挿入できるようにするHTML要素です。名前付きスロットを使用することで、複数の挿入ポイントを定義できます。Web Componentsの柔軟な再利用性を実現する中核的な仕組みであり、コンポーネント設計の要です。
対応ブラウザ
デスクトップ
Chrome 53+
Edge 79+
Safari 10+
Firefox 63+
モバイル
Chrome Android 53+
Safari iOS 10+
Firefox Android 63+
基本構文
HTML
/* Shadow DOM内 */
<slot name="header"></slot>
<slot></slot> /* デフォルトスロット */
/* Light DOM側 */
<my-card>
<h2 slot="header">タイトル</h2>
<p>本文テキスト</p>
</my-card>実務での使いどころ
-
再利用可能なコンポーネントの構築
ヘッダー、コンテンツ、フッターなど複数のスロットを持つカードコンポーネントを作成し、利用者が自由にコンテンツを挿入できます。
注意点
- スロットに挿入されたコンテンツはLight DOMに属するため、Shadow DOM内のCSSでは直接スタイリングできません。::slottedを使用してください。
アクセシビリティ
- スロット経由で挿入されたコンテンツもアクセシビリティツリーに含まれるため、適切な見出し構造とARIA属性を維持してください。