<slot>タグは、データの差し込みスロットを表す際に使用します。
HTMLにおけるスロットとは、データの差し込み口の役割を果たす要素のことです。
スロットは、slot要素を通じてのみ作成できます。
スロットとデータの紐づけには、slot要素のname属性を使用します。
slot要素のname属性の値と任意の要素のslot属性の値を一致させることで、slot要素と任意の要素を紐づけます。
データの差し込み口となるslot要素と、差し込まれるデータとなる任意の要素を紐づけて、
スロットにデータを差し込むようにしてテンプレートにデータを埋め込むことができます。
以下のサンプルは、slot要素で作成したスロットに、データを差し込んで表示しています。
<!--スロットに差し込むデータを用意-->
<catdata>
<div>
<span slot="catname">モモ</span>
<span slot="color">ハチワレ</span>
<span slot="sex">メス</span>
</div>
</catdata>
<catdata>
<div>
<span slot="catname">おはぎ</span>
<span slot="color">キジトラ</span>
<span slot="sex">オス</span>
</div>
</catdata>
<!--データの差し込み口となるスロット-->
<template id="catdata">
<slot name="catname">猫の名前</slot>
<slot name="color">毛色</slot>
<slot name="sex">性別</slot>
</template>