コンテンツ配分のためのSlot要素
名前付きスロットとデフォルトスロットでホストのコンテンツをShadow DOMに投影します
「コンテンツ配分のためのSlot要素」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
ライト DOM と Shadow DOM
HTML でカスタム要素の内部に記述した子要素は、その要素の「ライト DOM」を構成します。これらはシャドウツリーには含まれません。デフォルトではブラウザーはそれらを描画せず、シャドウツリー側で <slot> を使って明示的に要求する必要があります。
デフォルトスロット
シャドウツリー内の <slot> 要素は、ライト DOM の子要素を表示する場所を示します。名前を指定しないスロットはデフォルトスロットとなり、ホストの直接の子要素をすべて受け入れます。
// Shadow:
<div class="frame">
<slot></slot>
</div>
// Usage:
<my-card>
<p>This paragraph appears inside the frame</p>
</my-card>名前付きスロット
複数のスロットには名前を付けて指定できます。シャドウ側で <slot name="header"> を宣言し、利用側で <h1 slot="header"> を指定します。slot 属性が一致する子要素はそのスロットに配置され、一致しない子要素はデフォルトスロットに入ります。
// Shadow:
<header><slot name="header"></slot></header>
<main><slot></slot></main>
// Usage:
<my-card>
<h1 slot="header">Title</h1>
<p>Body</p>
</my-card>スロットのフォールバックコンテンツ
スロットタグの間に記述したコンテンツは、そのスロットに何も割り当てられていない場合にだけ表示されます。<slot>No content provided</slot> のように記述します。空のスロットにプレースホルダーや説明文を表示するために使用してください。
スロットをまたぐスタイルの継承
スロットに配置された子要素はライト DOM に残り、シャドウツリーではなくメインドキュメントからスタイルを継承します。シャドウ内部から ::slotted() 疑似要素を使用すると、次のようにスタイルを適用できます。::slotted(p) { color: red; }
::slotted の制限
::slotted() で対象にできるのは、ホストの直接の子要素（実際にスロットへ配布される要素）だけです。それらの子孫要素を対象にすることはできません。より深い階層をスタイルするには、CSS カスタムプロパティを公開するか、シャドウ内部の要素で ::part を使用してください。
スロットの変更を検出する
各スロットは、割り当てられたノードが変更されると slotchange イベントを発生させます。slot.addEventListener("slotchange", handler) のようにリスナーを設定すると、動的なコンテンツの更新に対応できます。存在する子要素によってレイアウトが変わるコンポーネントで役立ちます。
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
const nodes = slot.assignedNodes();
console.log("Slot now holds", nodes.length, "nodes");
});assignedNodes と assignedElements
slot.assignedNodes() は、スロットに割り当てられたすべてのノード（テキストノードを含む）を返します。slot.assignedElements() は Element の子要素だけを返します。スロットに配置されたコンテンツをプログラムで反復処理する場合は、通常こちらを使用します。
子要素の配布
ブラウザーは、各子要素の slot 属性に基づいて、すべての配布を自動的に処理します。JavaScript で処理する手順は必要ありません。ホストのライト DOM に <span slot="footer">...</span> と記述すれば、対応するシャドウスロットにその内容が配置されます。
スロットとホストのスタイル
ドキュメント内の <my-card> に設定したホスト自身のスタイルは、スロットに配置されるものも含め、ライト DOM の子要素にカスケードされます。同じプロパティを対象にする場合、::slotted を使ったシャドウ CSS の詳細度は、継承されたホストのスタイルより高くなります。
一般的なユースケース
ヘッダー、本文、フッター用のスロットを持つカード、タイトル、コンテンツ、アクション用のスロットを持つダイアログ、先頭と末尾用のスロットを持つリスト項目、項目用のスロットを持つナビゲーションメニューなどです。スロットを使うと、<details>/<summary> や <table>/<tr> と同じように、カスタム要素を組み合わせて利用できます。
理解度チェック
デフォルトスロットと名前付きスロットの違いは何ですか。
まとめ
スロットは、ライト DOM の子要素をシャドウツリー内の特定の場所に投影します。デフォルトスロットは名前のない子要素を受け入れ、名前付きスロットは一致する slot 属性を持つ子要素を受け入れます。フォールバックコンテンツは空のスロットを埋め、::slotted は直接のスロット配置先の子要素をスタイルし、slotchange イベントは動的なコンテンツ更新に対応します。
よくある質問
「コンテンツ配分のためのSlot要素」レッスンは無料ですか？
はい。「コンテンツ配分のためのSlot要素」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「コンテンツ配分のためのSlot要素」で何を学びますか？
名前付きスロットとデフォルトスロットでホストのコンテンツをShadow DOMに投影します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「コンテンツ配分のためのSlot要素」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。