<slot>－HTML Living Standard リファレンス

トップページ > HTML Living Standard > <slot>

★HTML Living Standard リファレンス

<slot> …… データの差し込みスロットを表す
Internet Explorer

<slot>タグは、データの差し込みスロットを表す際に使用します。

HTMLにおけるスロットとは、データの差し込み口の役割を果たす要素のことです。スロットは、slot要素を通じてのみ作成できます。

スロットとデータの紐づけには、slot要素のname属性を使用します。 slot要素のname属性の値と任意の要素のslot属性の値を一致させることで、slot要素と任意の要素を紐づけます。

データの差し込み口となるslot要素と、差し込まれるデータとなる任意の要素を紐づけて、スロットにデータを差し込むようにしてテンプレートにデータを埋め込むことができます。

■属性

name属性: スロットの名前を指定します。

■使用例

以下のサンプルは、slot要素で作成したスロットに、データを差し込んで表示しています。

HTMLソース

<!--スロットに差し込むデータを用意-->
<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>

↓↓↓

ブラウザ上の表示

モモハチワレメス

おはぎキジトラオス

■関連項目

<script> …… スクリプトを表す
<noscript> …… スクリプトが無効な環境向けの内容を表す
<template> …… テンプレートを表す
<slot> …… データの差し込みスロットを表す

★HTML Living Standard リファレンス

■属性

■使用例

HTMLソース

ブラウザ上の表示

■関連項目

Sponsors