A marker inside custom elements where external content is inserted.
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
属性は「ここに外からのコンテンツを入れてね」という印」です。