<slot>

概要

<slot> 要素は Web Components の一部で、Shadow DOM ツリー内のプレースホルダーとして独自のマークアップを挿入できます。

対応ブラウザ

基本構文

<!-- Shadow DOM テンプレート内 -->
<template id="card-template">
  <div class="card">
    <slot name="title">デフォルトタイトル</slot>
    <slot>デフォルトコンテンツ</slot>
  </div>
</template>

実務での使いどころ

• <slot> の活用

  Web Components で使用するスロット要素。Shadow DOM 内のプレースホルダーとして機能。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — <slot>