ラボラジアン 1. CSS Shadow Parts とは？
CSS Shadow Parts とは、Shadowツリー内の要素に対して、外部からスタイルを指定できるようにするための仕様です。
Web Components には Shadow DOM という仕様があり、これを使うと HTML の中に「スコープが隔離された HTMLパーツ」を追加することができます。これがものすごく便利なのですが、スタイルシートのスコープも隔離されるため、そのスコープの外側から内側の各要素にスタイルを指定することができません。
これを解決するのが、CSS Shadow Parts という仕様です。
※ 本記事は、Web Components のカスタムタグを作成する際に、Shadow DOM を利用する方法が分かっている人を対象としています。
2. CSS Shadow Parts の使い方
この仕様では、あらかじめ外側からスタイルを指定されてもよい要素に専用の属性を指定しておき、外側からはその属性で指定した値を使ってスタイルを適用させることができます。
上図は、<custom-tag> というカスタムタグが利用されています。このカスタムタグにアタッチされた shadow-tree 内には、part属性が指定された要素が存在しています。そして カスタムタグには exportparts属性をつけて、外側からスタイルを指定することのできる要素を指定しています。具体的には、スタイルを指定可能とさせたい要素のpart属性の値をセットします。あとは、::part 疑似要素を使って、外側からスタイルを指定するだけです。
利用手順
CSS Shadow Parts の利用手順をまとめると以下となります。
(1) shadow ツリー内で、外側からスタイルを指定させてよい要素に、part属性を指定します。
<p part="foo">World!</p>その要素を表す名前を値としてセットします。
(2) この shadowツリーを紐付けるカスタムタグに、exportparts属性を指定します。外側からスタイルの指定を許可したい要素につけた part属性の値をセットします。
<custom-tag exportparts="foo">
この際、コロンを使って別名を付けることができます。
<custom-tag exportparts="foo:外側に公開する名前">
(3) shadowツリー内の要素に対して外側からスタイルを指定します。
その際、::part 疑似要素を利用し、exportparts属性で指定された値を渡します（括弧内）。
custom-tag::part(foo) {
color: red;
}
3. おわりに
Web Components の Shadow DOM にとって、CSS Shadow Parts はないと困る仕様だと思います。ただ、使い方が分かりづらいので、本記事で紹介してみました。是非使ってみてください。
4. 参考
仕様
ブラウザの対応状況
- HTML attribute: exportparts | Can I use…
- HTML attribute: part | Can I use…
- CSS selector: ::part | Can I use…
記事
