<slot>
<slot> 要素は Web Components の一部で、Shadow DOM ツリー内のプレースホルダーとして独自のマークアップを挿入できます。
概要
<slot> 要素は Web Components の一部で、Shadow DOM ツリー内のプレースホルダーとして独自のマークアップを挿入できます。
対応ブラウザ
デスクトップ
Chrome 53+
Edge 79+
Safari 10+
Firefox 63+
モバイル
Chrome Android 53+
Safari iOS 10+
Firefox Android 63+
基本構文
HTML
<!-- Shadow DOM テンプレート内 -->
<template id="card-template">
<div class="card">
<slot name="title">デフォルトタイトル</slot>
<slot>デフォルトコンテンツ</slot>
</div>
</template> 実務での使いどころ
-
<slot> の活用
Web Components で使用するスロット要素。Shadow DOM 内のプレースホルダーとして機能。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。