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

★HTML Living Standard リファレンス

<slot> …… データの差し込みスロットを表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<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> …… データの差し込みスロットを表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ