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

メールアドレスが公開されることはありません。

関連記事

プライバシー

ウェブブラウザの DNT (Do Not Track) を有効にする方法

目次1. Do Not Track とは?2. トラッキングを拒否する意思を送信する手順Chrome の場合Firefox の場合Microsoft Edge の場合Internet Explorer …

Web

URLリダイレクトの動作

URLリダイレクトの動きについて説明します。

Web

window.opener を使って元ウィンドウの情報が取得できるかどうかの実験

ウェブブラウザでウェブページを表示している場合、ブラウザのウィンドウを表す window というオブジェクトが存在しており、JavaScript から利用することができます。 window.opene …

web development

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する方法を紹介します。

Web

Firefox で複数のプロファイルを使い分ける方法

目次1. Firefox のプロファイルについて2. プロファイルによって管理できるもの3. プロファイルの場所プロファイルの場所の確認方法4. プロファイルマネージャープロファイルマネージャーの起動 …