2025年2月2日 / 最終更新日時 : 2025年2月12日 weeds お役立ち

slotタグ -Web Components のカスタム要素内でコンテンツの挿入位置を定義する｜HTML辞典

<slot>タグとは？

<slot> タグは、Web Components のカスタム要素内でコンテンツの挿入位置を定義するためのタグです。
<slot> を使うことで、カスタム要素のテンプレートを柔軟に制御し、コンテンツを動的に挿入できます。

コンテンツモデル

フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。

閉じタグの有無

<slot> は 開始タグ（<slot>）と閉じタグ（</slot>）の両方が必要 です。

基本的な記述方法

<template id="myTemplate">
    <div class="card">
        <h2><slot name="title">デフォルトタイトル</slot></h2>
        <p><slot name="content">デフォルトコンテンツ</slot></p>
    </div>
</template>

<script>
    class MyCard extends HTMLElement {
        constructor() {
            super();
            let template = document.getElementById("myTemplate").content.cloneNode(true);
            this.attachShadow({ mode: "open" }).appendChild(template);
        }
    }
    customElements.define("my-card", MyCard);
</script>

<my-card>
    <span slot="title">カスタムタイトル</span>
    <span slot="content">カスタムコンテンツ</span>
</my-card>

使用できる主な属性

<slot> タグには、特定のスロットを識別するための name 属性があります。

属性名	説明	例
`name`	指定されたスロットのコンテンツを受け取る	`<slot name="title"></slot>`

CSSを使ったデザイン変更

スロットの内容には、::slotted() 疑似要素を使用してスタイルを適用できます。

::slotted(span) {
    color: blue;
    font-weight: bold;
}

適切な使用例

✅ カスタム要素内でタイトルとコンテンツを動的に挿入

<template id="cardTemplate">
    <div class="card">
        <h2><slot name="title">デフォルトタイトル</slot></h2>
        <p><slot name="content">デフォルトコンテンツ</slot></p>
    </div>
</template>

<script>
    class CardComponent extends HTMLElement {
        constructor() {
            super();
            let template = document.getElementById("cardTemplate").content.cloneNode(true);
            this.attachShadow({ mode: "open" }).appendChild(template);
        }
    }
    customElements.define("card-component", CardComponent);
</script>

<card-component>
    <span slot="title">カスタムタイトル</span>
    <span slot="content">カスタムコンテンツ</span>
</card-component>

✅ <slot> のデフォルトコンテンツを利用

<template id="defaultTemplate">
    <p><slot>デフォルトのテキスト</slot></p>
</template>

<script>
    class DefaultSlot extends HTMLElement {
        constructor() {
            super();
            let template = document.getElementById("defaultTemplate").content.cloneNode(true);
            this.attachShadow({ mode: "open" }).appendChild(template);
        }
    }
    customElements.define("default-slot", DefaultSlot);
</script>

<default-slot></default-slot>

適切でない使用例（誤った使い方）

❌ <slot> をカスタム要素の外で使用すると意味がない

<!-- NG: <slot> はカスタム要素内で使用する -->
<slot name="title">タイトル</slot>

✅ 正しい書き方（カスタム要素のテンプレート内で使用）

<template>
    <h2><slot name="title">デフォルトタイトル</slot></h2>
</template>

❌ slot 属性を指定しないと、正しく挿入されない

<!-- NG: slot 属性なし -->
<my-card>
    <span>タイトル</span>
</my-card>

✅ 正しい書き方（slot 属性を指定）

<my-card>
    <span slot="title">カスタムタイトル</span>
</my-card>

<slot>タグと他のタグの違い

タグ	役割	特徴	適切な用途
`<slot>`	Web Components でコンテンツを挿入	`name` 属性で特定のスロットを識別	カスタム要素の動的コンテンツ挿入
`<template>`	HTML テンプレートを定義	ページロード時に表示されない	カスタム要素のテンプレート化
`<div>`	通常のコンテンツのグループ化	そのまま表示される	レイアウトやスタイリング

使用上の注意点

✅ <slot> は Web Components のテンプレート内で使用する

<template> 内に配置し、カスタム要素内で機能する。

✅ slot 属性を使って適切なコンテンツを挿入する

<span slot="title"> のように、適切なスロット名を指定する。

✅ ::slotted() 疑似要素を使ってスロット内のスタイルを調整する

通常の CSS ではなく、::slotted() を使う必要がある。

まとめ

<slot> タグは、HTML 文書内で Web Components のカスタム要素内でコンテンツの挿入位置を定義するためのタグ です。
name 属性を適切に指定し、Web Components を活用して動的な UI を作成する際に利用されます。

カテゴリー: お役立ち