こんにちは。フロントエンドの現場で長年CSSと格闘してきた者です。
今日は、Shadow DOMという少し「閉じた世界」の中にある要素が、外側の空気感を読み取ってスタイルを変える、ちょっと魔法のようなテクニック「`:host-context()`」についてお話しします。
「Shadow DOM？ 何それ？」という方も大丈夫。まずは身近な例えから入っていきましょう。
—
1. 「空気を読む」CSS、`:host-context()` とは？
想像してみてください。あなたは今、「自分専用の小さな箱（Shadow DOM）」の中に住んでいるとします。
普段、あなたはその箱の中ではいつも通りの格好をしています。でも、もしその箱が「高級なホテルのロビー」に置かれたら、ちょっとシックな服に着替えたい。逆に、「公園のベンチ」に置かれたら、カジュアルなTシャツに着替えたいですよね。
CSSの `:host-context()` は、まさにこの「置かれた場所（文脈）によって、自分の見た目を変える」ためのスイッチなんです。
なぜこれが必要なの？
普通、Shadow DOMの中の世界は、外側からは干渉できない「隔離された安全地帯」です。でも、現実のWeb制作では「このコンポーネント、ダークモードのページに置かれた時だけは文字を白くしたいな」といったことがよくありますよね。
そんな時、いちいち外側から「おーい！今ダークモードだよ！」と通知しなくても、コンポーネント自身が「あ、周りが暗いな。じゃあ自分も色を変えよう」と自律的に動ける。これこそが、`:host-context()` の真骨頂なんです。
—
2. さっそくコードで見てみよう
まずはシンプルな例です。`dark-theme` というクラスが親要素にあるときだけ、このコンポーネントの中身が黒っぽくなる仕組みを作ってみましょう。
/
:host はコンポーネント自身のことを指します。
:host-context(.dark-theme) は、
「親のどこかに .dark-theme がいる時だけ適用する」という条件です。
/
:host {
display: block;
padding: 20px;
background-color: white; / 通常の背景色 /
color: black;
}
:host-context(.dark-theme) {
/ 親要素に .dark-theme があれば、ここが発動！ /
background-color: #333;
color: white;
border: 1px solid #555;
}
つまずきやすいポイント：ここだけは気をつけて！
実はこの `:host-context()`、非常に強力な反面、ブラウザのサポート状況や仕様の変遷が少し複雑な部分でもあります。
- 「どこまで見ているの？」: このセレクタは、親要素からさらにその上の祖先要素まで、ずーっと辿ってチェックしてくれます。
- 「今のブラウザ事情」: 長らく便利な味方でしたが、実は標準仕様としては少し慎重に扱うべき存在でもあります。現場では、「念のため」のバックアップを用意したり、テーマ切り替えにはCSS変数（Custom Properties）を組み合わせるのが現在の「大人の知恵」です。
—
3. 現場の知恵：CSS変数と組み合わせる
実は、`:host-context()` だけに頼り切るのではなく、CSS変数と組み合わせると、もっとメンテナンスが楽になります。
/ コンポーネント側 /
:host {
/ 初期値は明るいテーマ /
–bg-color: #ffffff;
–text-color: #000000;
background-color: var(–bg-color);
color: var(–text-color);
}
/ 文脈が変わったら、変数の中身を書き換えるだけでいい /
:host-context(.dark-theme) {
–bg-color: #333333;
–text-color: #ffffff;
}
こうしておけば、後から「ダークモードの時は背景をもう少し青っぽくしたいな」と思ったとき、修正箇所が1箇所で済みますよね。これが、私たちフロントエンドエンジニアが生き残るための「疎結合」という考え方です。
—
最後に：CSSは「ルール」ではなく「コミュニケーション」
CSSを書いていると、つい「どうやって上書きするか」「どうやって無理やり動かすか」という力技に走りがちです。でも、`:host-context()` のように、「周りの環境を尊重しつつ、自分の装いを調整する」という考え方は、とても優しくて、そしてとても賢いやり方です。
最初は難しく感じるかもしれませんが、まずは小さなコンポーネントで「もし親がこうだったら」という想像をしながら遊んでみてください。
「動かない！」と困ったときは、いつでも戻ってきてくださいね。CSSの世界は深くて広いですが、その分だけ、思い通りに動いた時の喜びは格別ですよ。
応援しています！
コメント