Web

Web Components: CSS Shadow Parts の使い方

投稿日:2020年3月28日 更新日:

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 の使い方

この仕様では、あらかじめ外側からスタイルを指定されてもよい要素に専用の属性を指定しておき、外側からはその属性で指定した値を使ってスタイルを適用させることができます。

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. 参考

仕様

ブラウザの対応状況

記事

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Google App Engine

Google App Engine にデプロイしてあるファイルをダウンロードする

Google App Engine にデプロイしてあるファイルをダウンロードする方法について説明します。

Glitch

Glitch に DokiWiki を設置しようとして失敗しました

Glitch に DokuWiki を設置しようとしたのですが、残念ながら失敗してしまいました。ここにその記録を残しておこうと思います。

DokuWiki

DokuWiki: Layout Switcher Plugin

DokuWiki用プラグイン「Layout Switcher Plugin」のページです。 目次1. 概要2. インストールと設定(1) プラグインファイルのダウンロード(2) プラグインをサーバーに …

Glitch

ブラウザだけで完結するウェブアプリ作成環境 Glitch

ブラウザだけで完結するウェブアプリ作成環境 Glitch を紹介します。

Web

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

目次1. Webフォントの読み込みと font-display 記述子(概要)2. font-display 記述子を使ってテキストをすぐに表示させる方法3. font-display 記述子の詳しい …