こんにちは！フロントエンドの現場を長年歩んできた、いわば「CSSのお医者さん」のようなものです。
日々のコーディングで、「あれ、なんでこのCSS、カプセル化されちゃって外から効かないの……？」と、画面の前で頭を抱えた経験はありませんか？ 特に最近のWebコンポーネントやモダンなUIライブラリに触れ始めると、必ずと言っていいほどぶつかる壁があります。それが「Shadow DOM（シャドウ・ドム）」の壁です。
「外の世界から完全に隔離された秘密の小部屋」みたいなもので、一度その中に入ってしまうと、外側でいくら「この色にして！」と叫んでも、中の要素には届いてくれないんです。
でも、安心してください。今日は、そんな閉ざされたお部屋の窓を少しだけ開けて、外からおしゃれにコーディネートできる魔法の合言葉……`::part` 擬似要素について、どこよりも優しく、一緒に紐解いていきましょう！
—
1. Shadow DOMってなぁに？（カプセル化という名の「防音室」）
まずは、イメージしやすい例えからお話ししますね。
ウェブサイトを作るとき、私たちは普段、自由にHTMLやCSSを書いていますよね。これは例えるなら、「家族みんなが行き来できるリビング」のようなものです。どこをどう掃除しても、家の中全体につながっています。
しかし、最近のWebパーツ（例えば、きれいなカレンダーや、おしゃれなトグルスイッチなど）は、外部のプロジェクトに組み込まれても、そのデザインが勝手に壊されないように「防音室（Shadow DOM）」の中に大切にしまわれています。
この防音室の中に入ってしまうと、外のCSS（グローバルなCSS）はシャットアウトされてしまいます。「中のボタンを赤くしたい！」と思っても、外から `button { background: red; }` と書いても、防音室の中のボタンには届かないのです。「えっ、じゃあ中のデザインは一生変えられないの？」と思いますよね。
そこで登場するのが、今回主役の `part` 属性 と `::part` 擬似要素 です！
—
2. 秘密の合言葉：`part` 属性と `::part` の関係
防音室の中にある要素を外からスタイリングしたいとき、私たちはコンポーネントの作者にお願いして、こう言ってもらう必要があります。
> 「このパーツには『button-element』っていう名前の合言葉（パスポート）をつけておくね。この合言葉を知っていれば、外からでもスタイルをいじっていいよ！」
これが、HTML側で指定する `part=”合言葉”` です。
そして、その合言葉を持った要素を、外側のCSSから指名してスタイリングするのが `::part(合言葉)` なんです。
イメージとしては、防音室の壁に小さな小窓があって、「`part=”button-element”` って書いてある専用の窓口からなら、外のペン（CSS）が届くよ」という仕組みです。
—
3. 実際にコードを書いてみよう！
百聞は一見にしかず。簡単なサンプルコードで動きを確認してみましょう。
今回は、とあるカスタム要素 `
HTML（外側の世界）と Webコンポーネント（防音室の中）のイメージ
このコードをそのままエディタに貼り付けてブラウザで開いてみてください。
防音室の中にあるボタンの背景色が、きれいなコーラルレッドに変わっているのが確認できるはずです！
—
4. チーフアーキテクトが教える、実務でつまずきやすい「罠」とコツ
現場で `::part` を使い始めると、いくつかの「あれ？」というポイントにぶつかります。先輩たちが通ってきた道ですので、ここで先回りしてシェアしておきますね。
① 「なんでもかんでも外から変えられる」わけではない
セキュリティやカプセル化の観点から、コンポーネントの作者が `part` 属性をつけてくれていない要素は、外側から絶対にスタイリングできません。「このボタンの色を変えたいのに変えられない！」というときは、大体コンポーネント側で `part` が用意されていないことが原因です。その場合は、作者に「ここに `part` 属性を追加してください！」とプルリクエストを送りましょう（笑）。
② 詳細度（Specificity）のルールに注意
`::part()` は、セレクタとしては通常のクラスと同じような扱いになります。そのため、CSSの書き方次第ではスタイルの競合が起きることがあります。
「あれ、スタイルが上書きされないな？」と思ったときは、詳細度を確認してみてくださいね。
③ 擬似クラス（`:hover` や `:active`）との組み合わせ方
先ほどのコードでも書きましたが、`::part(foo):hover` のように、`::part()` の後ろに続けて擬似クラスを書くことができます。
逆に、`::before` や `::after` のような「要素そのものの擬似要素」を `::part` の中にある要素に対して外から直接生やすことはできません（例: `user-card::part(foo)::before` は動きません）。中の構造に関わる装飾は、コンポーネントの中のCSSに任せるのが美しく安全な設計です。
—
さいごに
CSSの世界は日々進化していて、最初は「カプセル化ってめんどくさいな……」と感じるかもしれません。でも、この `::part` 擬似要素をマスターすると、「堅牢に守られたカプセル化の安全性」と「プロジェクトごとの柔軟なデザイン調整」という、一見すると矛盾する2つの要望をエレガントに両立できるようになります。
「あ、このパーツ、外からいじれるんだっけ？」と思ったら、そっと `part` 属性と `::part()` の存在を思い出してくださいね。
あなたのWeb制作ライフが、少しでも楽しく、ワクワクするものになりますように。それでは、また次の現場でお会いしましょう！
コメント