こんにちは！Web制作やCSSの勉強、毎日お疲れ様です。
CSSを少しずつ覚えて、「よし、自分でパーツを作ってみよう！」と意気込んでみたものの、最近のモダンな技術（Web ComponentsとかShadow DOMとか……）の名前を聞いただけで、「うわ、難しそう……」とそっとブラウザのタブを閉じたくなること、ありませんか？
大丈夫ですよ、安心してください。今日お話しする「`::slotted` 擬似要素」も、最初はみんな「なんじゃこれ？」って頭を抱えるポイントです。でも、身近な例えを使えば「なぁんだ、そういうことか！」とすんなり腑に落ちるはずです。
今日は、そんな`::slotted`の世界へ、コーヒーでも飲みながらゆっくり出かけてみましょう。
—
1. 例え話：あなた専用の「お弁当箱」と「おかず」
まずは、Web Componentsの世界をのぞいてみましょう。
ここで登場するのが「Shadow DOM（シャドウ・ドム）」という、ちょっと秘密基地っぽい仕組みです。
これを「超高機能なお弁当箱」だと思ってください。
このお弁当箱（カスタム要素）は、中身の構造が外から見えないようにカプセル化（秘密に）されています。例えば、「ボタン」というお弁当箱があったとき、その中の角丸のデザインや、影のつき方はお弁当箱の秘密のレシピで作られています。
でも、お弁当箱を買った人が、「今日のおかずは何にしようかな？」と、中身（コンテンツ）を自由に詰め替えたいですよね？
その「おかずをポンと入れるための仕切り（穴）」が、`
- お弁当箱（親）：ボタンの枠組みや基本の仕組み
- 仕切り（slot）：外から来たおかずをスポッと収める場所
- おかず（スロットコンテンツ）：私たちがHTMLに書く「ここをクリック」という文字やアイコン
さて、ここで問題が発生します。
「お弁当箱のフタ（Shadow DOMの内側）から、外から入れてもらったおかず（スロットコンテンツ）の見た目をちょっと飾り付けたい！」と思ったとき、普通のCSSは使えないんです。なぜなら、お弁当箱のフタが頑丈すぎて、外から入ってきたおかずの様子が見えないからなんですね。
そこで登場するのが、今回の主役である`::slotted` 擬似要素です！
—
2. `::slotted` って一体なにをするもの？
一言でいうと、`::slotted` は「外からお弁当箱の中にポンと入れられた『おかず』に向かって、お弁当箱の中からこっそり『もっと美味しく（おしゃれに）なりなよ！』と魔法をかけるためのセレクタ」です。
もう少しエンジニアっぽく言うと、「Shadow DOMの内部から、スロットに挿入された外部の要素を指定してスタイルを当てるための仕組み」になります。
これがあるおかげで、カスタム要素のなかに文字やアイコンが差し込まれたときでも、「どんな文字が入ってきても、文字の色を赤くするぞ」といった制御ができるようになるわけです。
—
3. つまずきやすいポイント：気をつけてほしい「一層の壁」
ここで、CSSを書き始めたばかりの人が一番引っかかりやすい、そして私も昔盛大にハマった「落とし穴」をお伝えしておきます。
それは、`::slotted()` のカッコの中に書けるのは、すぐ隣にいる「直撃の要素」だけというルールです。
例えば、こういうHTMLがあったとします。
こんにちは、世界！
このとき、シャドウ側から `::slotted(span)` と書いても、スタイルは当たりません。
なぜなら、スロットにスポッとハマっているのは `span` ではなく、その親にいる `
` タグだからです。
`::slotted()` が見ているのは、あくまで「スロットの口に一番最初に飛び込んできた直属の子ども」だけ。孫やひ孫の要素まで直接狙い撃ちすることはできないのです。ここ、本当に最初は「えっ、なんで効かないの！？」って泣きたくなるところなので、ぜひ覚えておいてくださいね。
—
4. さぁ、実際にコードを書いて動かしてみよう！
百聞は一見にしかず。実際に動くコードを見てみましょう。
コピペして、お使いのエディタやブラウザで試してみてくださいね。
山田 太郎
コードの解説
1. HTML側では `
2. JavaScript側のシャドウDOMの中に `
3. CSSの `::slotted(.username)` が、「あ、外から `span.username` がスロットに入ってきたな」と察知して、文字の色を綺麗なターコイズブルーに変えてくれます。
ブラウザで開いてみると、外側から渡した文字だけが、ちゃんとシャドウDOMの中のスタイルで飾られているのが確認できますよ。
—
最後に：CSSの旅はまだまだ続く
いかがでしたでしょうか？
`::slotted` 擬似要素は、Web Componentsという少し高度な世界の話なので、最初のうちは仕組みが複雑に感じるかもしれません。でも、「お弁当箱とおかず」の関係に例えてみると、役割がぐっとシンプルに見えてきたのではないでしょうか。
Web制作の技術は日進月歩ですが、基本の「要素と要素の関係性をどう結ぶか」という考え方は、いつの時代も変わりません。
もし途中でコードがうまく動かなくても、「あ、今はちょっと違う階層を狙っちゃったかな？」と、今日のお話を思い出して優しく見つめ直してあげてくださいね。
あなたのフロントエンドの旅が、もっと楽しく、ワクワクするものになりますように。それではまた、次のCSSの冒険でお会いしましょう！
コメント