VIDEO LESSON

HTMLのslotタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:35動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の二十六本目は、スロットタグです。
0:08スロットは、再利用できる部品の中に、外から渡された文章や要素をはめ込むための差し込み口です。
0:15主にシャドウドムという、部品専用の独立した領域の中で使います。
0:20たとえばカード部品の見出しや本文を、使う側が自由に入れ替えられるのは、この仕組みがあるからです。
0:28今回は、シャドウドムとの関係、名前付きスロットの使い方、コード例と注意点を、
0:32初心者向けに順番に解説します。
0:37少し応用的なタグですが、考え方はシンプルです。
0:40まず、どんな場面で使うかをイメージしましょう。
0:44たとえば、同じデザインのカードを何枚も並べるサイトを考えてください。
0:49枠や余白、文字の大きさは共通でも、見出しや本文はカードごとに違います。
0:55こうした再利用部品を作るとき、部品の作り手が枠組みを用意し、使う側が中身を差し込む、
0:59という分担ができると便利です。
1:04その差し込み口がスロットです。
1:06ダイアログのタイトルと本文、ボタンのラベルなど、部品の一部だけを差し替えたい場面で活躍します。
1:14普通の段落や見出しだけで作るページでは出番は少なく、部品を作る段階で必要になるタグだと覚えてください。
1:22スロットを理解する鍵が、シャドウドムです。
1:25ウェブコンポーネンツでは、部品の内部構造をシャドウドムという独立した領域に置き、
1:31外側のシーエスエスやスクリプトと干渉しにくくできます。
1:36一方、利用者が普通に書くエイチティーエムエルは、ライトドムと呼ばれます。
1:42問題は、ライトドムに書いた文章を、どうやってシャドウドムの中の部品に表示するかです。
1:49そこでスロットが橋渡しをします。
1:52シャドウドム側にスロットを置いておくと、ライトドム側の要素がその位置に差し込まれて表示されます。
2:00シャドウドムの外へスロットだけを置いても、この働きにはならない点が重要です。
2:06基本の書き方です。
2:07スロットには開始タグと終了タグがあり、その間には後で説明する代替の内容を書けます。
2:13配置場所は、部品のシャドウドム側、つまりジャバスクリプトで組み立てるテンプレートの中です。
2:20利用する側は、カスタム要素の開始タグと終了タグの間に、表示したい文章や要素を普通に書きます。
2:26すると、名前のないスロットには、その内容がまとめて差し込まれます。
2:31ファイルを用意するだけでは動かず、部品を定義するスクリプトとセットで使うタグだという点も押さえておきましょう。
2:39構造自体は、差し込み口と差し込む中身、の二つだけです。
2:43部品に差し込み口が複数ある場合は、ネーム属性で区別します。
2:48部品側では、見出し用のスロットにタイトルという名前を付ける、というように、
2:52各スロットへ名前を付けます。
2:56利用側では、渡したい要素にスロット属性を書き、行き先の名前を指定します。
3:01両方の名前が一致した要素だけが、そのスロットに差し込まれます。
3:06たとえばカードの見出しと本文を別々に渡したいとき、この振り分けが欠かせません。
3:12名前に決まった候補があるわけではなく、部品の作り手が分かりやすい名前を決めます。
3:19名前のつづりを一文字でも間違えると差し込まれないので、対応関係を丁寧に確認しましょう。
3:25記事の活用事例を見てみましょう。
3:28利用側のコードでは、マイハイフンカードというカスタム要素の中に、タイトルというスロット属性を付けたスパン要素と、
3:33普通の段落を書いています。
3:38スパンの中身は見出し用のスロットへ、スロット属性のない段落は名前のないデフォルトのスロットへ、
3:43それぞれ差し込まれます。
3:47練習では、エイチティーエムエルのファイルにこの利用側のコードと、部品を定義するスクリプトを写して保存し、
3:52再読み込みして確認してください。
3:57開発者ツールのエレメンツで、内容が意図した位置に表示されているか確かめるのがポイントです。
4:04部品側のスクリプトも簡単に確認します。
4:07カスタムエレメンツ、ドット、デファインで、マイハイフンカードという新しい要素を登録します。
4:12その中でアタッチシャドウを呼び、部品専用のシャドウドムを作ります。
4:16そして、その内部のエイチティーエムエルとして、見出しの中にタイトルという名前付きスロットを置き、
4:21続けて名前のないスロットを置く、という組み立てをします。
4:26記事の例も同じ流れです。
4:27ここで大切な注意があります。
4:29例のインナーエイチティーエムエルは、開発者が決めた固定の文字列です。
4:33外部から受け取った入力を、そのまま文字列として連結してはいけません。
4:38安全のため、入力を差し込む設計とは分けて考えてください。
4:41スロットの開始タグと終了タグの間に書いた内容は、フォールバック、つまり代替表示になります。
4:49利用側から何も差し込まれなかった場合だけ、その中身が表示されます。
4:55記事の例では、タイトル用スロットの中に教材という言葉が書かれていて、タイトルが渡されなければ教材と表示され、
5:01渡されればそちらに置き換わります。
5:07本文用のスロットにも、本文はありません、といった案内を入れておけます。
5:13空っぽの部品が表示されて利用者を困惑させないための、優しい仕組みです。
5:20部品を作るときは、差し込まれない場合の姿まで設計しておくと、再利用しやすい部品になります。
5:27注意点と、よくある間違いをまとめます。
5:31一つ目は名前の不一致です。
5:33部品側のネームと利用側のスロット属性が少しでも違うと、要素はどこにも差し込まれず、
5:37表示されなくなります。
5:42二つ目は置き場所の間違いです。
5:44スロットをシャドウドムの外、普通の文書の中に置くだけでは、差し込み口としては働きません。
5:52三つ目は、テンプレートタグとの混同です。
5:55テンプレートは表示されないひな型を置く仕組みで、スロットとは役割が違います。
6:02うまく表示されないときは、開発者ツールでシャドウルートが作られているか、
6:07名前が一致しているかを順に確かめてください。
6:12三百二十ピクセル程度の画面でも崩れないか、あわせて確認しましょう。
6:18ブラウザー互換性を確認します。
6:20記事が参照するエムディーエヌの記録では、スロット本体は、クロームが五十三以降、
6:24ファイアフォックスが六十三以降、サファリが十以降で対応しています。
6:29エッジについては、共通エンジンのデータを参照して確認する形です。
6:33ネーム属性についても、同じバージョンから対応すると記録されています。
6:38現在の主要ブラウザーでは広く使える仕組みですが、ウェブコンポーネンツ全体の設計はやや応用的な内容です。
6:44古いブラウザーを対象に含める場合は、部品自体が動かない可能性も含めて、代替の表示を用意できるか検討してください。
6:52導入前には、対象ブラウザーの最新情報も確認しましょう。
6:55最後に練習とまとめです。
6:57スロットは、シャドウドムで作る再利用部品に、外から内容を差し込むための口でした。
7:03大切なポイントは三つです。
7:04一つ目は、スロットはシャドウドムの中に置いて初めて働くこと。
7:09二つ目は、複数ある場合は部品側のネームと利用側のスロット属性を正確に一致させること。
7:15三つ目は、何も渡されない場合の代替表示まで用意することです。
7:19練習として、記事のカード部品の例を写し、タイトルと本文を自分の文章に変えて表示を確認してみてください。
7:26お疲れさまでした。
7:27部品化の考え方は、大きなサイトを作る力になります。
7:31次回もエイチティーエムエルタグの解説を続けましょう。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

slotタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。主にShadow DOMで外から渡す内容の差し込み位置。name で複数の位置を区別します。

解説記事・サンプルコードを読む：HTMLのslotタグとは？属性・使い方・ブラウザー互換性と活用例 →