カスタム要素へのスタイルの追加 (ベータ)

サードパーティ Web コンポーネントには、Shadow DOM または Light DOM で作成されたカスタム要素を含めることができます。Shadow DOM では、closed モードよりも open モードの方が広く使用されています。使用しているサードパーティ Web コンポーネントが特定のシャドウモードを使用しているかどうかを調べるには、Web コンポーネントのドキュメントを参照してください。または、Web コンポーネントのソースを表示して、attachShadow({mode: 'closed|open'}) メソッドを見つけてください。Light DOM を使用する Web コンポーネントでは attachShadow() メソッドは使用されません。

サードパーティ Web コンポーネントの DOM モデルを特定したら、カスタム要素とその内部のスタイルを決定できます。

Shadow DOM でのカスタム要素のスタイル設定の実装

Shadow DOM を使用する場合、カスタム要素にコンテナコンポーネントからスタイルを継承することはできません。同様に、カスタム要素内で定義されたスタイルは外部に出力されません。closed モードでは、カスタム要素の Shadow DOM にスタイルを追加することはできません。たとえば、this.refs.myEl.shadowRoot は null を返します。

多くの Web コンポーネント作成者はカスタム要素にスタイルを実装するために、<style> タグをシャドウルートに追加します。Web コンポーネントのソースを表示して、次と同じような行を見つけてください。これらのスタイルの範囲は、シャドウルート内に設定されます。

1const style = document.createElement("style");
2style.textContent = `.someSelector { color: red }`;
3this.shadow.appendChild(style);

closed モードでスタイルを追加するには、CSS 変数 (カスタムプロパティ)、クラス、またはシャドウパーツを使用します。サードパーティ Web コンポーネントに実装されているシャドウルートスタイル設定以外に、JavaScript を使用して CSS スタイルを定義することはお勧めしできません。

Web コンポーネントの作成者は、このような CSS カスタムプロパティを含めた場合に、シャドウルートのスタイルを上書きできようにします。

コンポーネント内のカスタム要素のスタイル設定に使用できる CSS カスタムプロパティとシャドウパーツについては、サードパーティ Web コンポーネントのソースまたはドキュメントを確認してください。

Tip

1style.textContent = `.someSelector { color: var(--my-title-color, 	#AA4A44)}`;

CSS のカスタムプロパティは Shadow DOM に反映されるため、ホストコンポーネントのスタイルを上書きすることができます。

サードパーティ Web コンポーネントが、CSS カスタムプロパティ --my-border の border: var(--my-border, 1px solid black); の境界線のスタイルを指定しているとします。ホストコンポーネントでは、CSS カスタムプロパティを独自の値で使用します。

1/* popupInfo.css */
2:host {
3  --my-border: 1px solid green;
4}

サードパーティのカスタム要素のホスト要素にスタイルを設定する場合は、.css ファイルでカスタム要素のセレクタを使用します。たとえば c-custom-el { background-color: red; } のように記述します。

1<!--styleExample.html -->
2<template>
3  <c-custom-el lwc:external></c-custom-el>
4</template>

次の c-custom-el セレクタは、カスタム要素のコンテンツに赤い背景を適用します。

1/* styleExample.css */
2c-custom-el {
3  background-color: red;
4}

カスタム要素は次のように表示されます。

1<c-style-example>
2  #shadow-root (open)
3  |  <c-custom-el>
4  |    #shadow-root (closed)
5  |    |  <slot>your text here</slot>
6  |   </c-custom-el>
7</c-style-example>

Light DOM でのカスタム要素のスタイル設定の実装

Shadow DOM と違い、Light DOM を使用すると、ルートドキュメントから DOM ノードを対象にして、スタイルを設定できます。このため、コンテナコンポーネントのスタイルが、ネストされたカスタム要素の Light DOM 内にカスケードされます。Light DOM で表示されるカスタム要素のスタイルは、シャドウの境界が現れるまで、コンテナコンポーネントにも適用されます。

サードパーティ Web コンポーネントがライト DOM を使用している場合、.css ファイル内でクラスを使用してカスタム要素の内部をスタイル設定できます。カスタム要素内のスタイルの範囲を指定するには、コンポーネントバンドルで .scoped.css ファイルを使用してスタイルを組み込みます。

1<!--styleExample.html-->
2<template>
3  <custom-element class="highlight" lwc:external></custom-element>
4</template>

css ファイルで、カスタムスタイルを指定します。

1.highlight {
2  color: red;
3}

関連トピック

Light DOM

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。