HTML

A marker inside custom elements where external content is inserted.

slot 属性

slot属性は、**Web Components(カスタム要素)の中で使われます。親のHTMLから子のカスタム要素にコンテンツを渡す場所(差し込み口)**を指定するために使います。

たとえば <my-card> のような部品を作るとき、見出しや内容の表示位置を slot で決めておくことで、呼び出し元から中身を自由に差し込めるようになります。

HTML

<!-- 呼び出し側 -->
<my-card>
	<h2 slot="title">お知らせ</h2>
	<p>明日は休業日です。</p>
</my-card>

<!-- カスタム要素の中身(テンプレート側) -->
<slot name="title"></slot>
<slot></slot>

このように、slot属性は「ここに外からのコンテンツを入れてね」という印」です。