Search docs/

CSS Shadow Parts

CSS Shadow Partsを使用すると、開発者はシャドウ・ツリー内の要素にCSSプロパティのスタイルを設定できます。これはIonic Framework Shadow DOMコンポーネントをカスタマイズする際に非常に便利です。

Shadow Partsを使う理由

Ionic Frameworkは、Web Componentsの分散セットです。Webコンポーネントは、スタイルとマークアップをカプセル化するために、Shadow DOMの仕様に従います。

Ionic Frameworkコンポーネントは、すべてShadow DOMコンポーネントではありません。コンポーネントがShadow DOMコンポーネントの場合、コンポーネントのドキュメントの右上にバッジが表示されます。Shadow DOMコンポーネントの例として、buttonコンポーネントがあります。

Shadow DOMは、スタイルがコンポーネントから漏れたり、意図せず他の要素に適用されたりするのを防ぐのに便利です。たとえば、 ion-button コンポーネントに .button クラスを割り当てます。Shadow DOMカプセル化がない場合、ユーザがクラス .button を独自の要素に設定すると、Ionic Framework button styleを継承します。 ion-button はシャドウコンポーネントなので問題ありません。

ただし、このカプセル化のため、スタイルはシャドウコンポーネントの内部要素にも影響を及ぼしません。つまり、シャドウ・コンポーネントがシャドウ・ツリー内の要素をレンダリングする場合、内部要素はCSSで直接ターゲットにすることはできません。例えば、 ion-select コンポーネントを使用すると、次のマークアップがレンダリングされます:

<ion-select>
  #shadow-root
    <div class=”select-text select-placeholder”></div>
    <div class=”select-icon”></div>
</ion-select>
CopyCopied

プレースホルダテキストおよびアイコン要素は、 #shadow-root の内部にあります。つまり、次のCSSを使用すると、プレースホルダーのスタイルを設定できません:

/* Does NOT work */
ion-select .select-placeholder {
  color: blue;
}
CopyCopied

どうやってこれを解決しますか?それが CSS Shadow Parts です!

Shadow Partsの説明

Shadow Partsを使用すると、開発者はシャドウ・ツリーの外側からシャドウ・ツリー内にスタイルを設定できます。これを行うには、 partを使って露出 し、次に ::part を使用してスタイルを設定します。

Partsの露出

Shadow DOMコンポーネントを作成する場合、要素に part 属性を割り当てることで、シャドウツリー内の要素に部品を追加できます。これはIonic Frameworkのコンポーネントに追加されているので、エンドユーザーからのアクションは必要ありません。

先程の ion-select コンポーネントを例として使用すると、マークアップは次のように更新されます:

<ion-select>
  #shadow-root
    <div part=”placeholder” class=”select-text select-placeholder”></div>
    <div part=”icon” class=”select-icon”></div>
</ion-select>
CopyCopied

上のコードは、placeholdericon の2つの部分を示しています。すべてのPartについては、select documentationを参照してください。

これらのPartが設定されているので、 ::part を使用して要素に直接スタイル設定することができます。

どうやって ::part を動かすのか

::part() の疑似要素を使用すると、開発者は、part属性によって露出されているシャドウ・ツリー内の要素を選択できます。

ion-select は、値が選択されていないときにテキストをスタイル設定するための placeholder 部分をPartによって露出してることがわかっているので、次の方法でカスタマイズできます:

ion-select::part(placeholder) {
  color: blue;
  opacity: 1;
}
CopyCopied

::part を使用したスタイル設定では、そのエレメントが受け入れたCSSプロパティを変更できます。

Partをターゲットにできるだけでなく、 疑似要素 によってスタイル設定できます:

ion-select::part(placeholder)::first-letter {
  font-size: 22px;
  font-weight: 500;
}
CopyCopied

Partはほとんどの 疑似要素 と一緒に利用することができます:

ion-item::part(native):hover {
  color: green;
}
CopyCopied

ベンダー接頭辞つきの疑似要素構造擬似クラス には既知の制限があります。

Ionic Framework Parts

Ionic Frameworkコンポーネントのすべての露出されているPartは、APIページの 「CSS Shadow Parts」 見出しの下にあります。すべてのコンポーネントとそのAPIページを表示するには、 コンポーネントのドキュメント を参照してください。

Partを利用することができるコンポーネントは、次の条件を満たしてる必要があります:

  • Shadow DOM コンポーネントです。 Scoped もしくはLight DOMコンポーネントの場合は、子要素を直接スタイリングすることができます。コンポーネントがScopedかShadowかは、その コンポーネントのドキュメンテーション に表記されています。
  • 子要素を含みます。たとえば、ion-card-header はShadowコンポーネントですが、すべてのスタイルがホスト要素に適用されます。子要素がないので、Partは必要ありません。
  • 子要素が構造化されていません。 ion-title を含む特定のコンポーネントでは、子要素は内部要素の配置に使用される構造要素です。予期しない結果が生じる可能性があるため、構造要素をカスタマイズすることはお勧めしません。

Partの追加の提案を歓迎します。パーツをリクエストする際に、できるだけ多くの情報を含む new GitHub issue を作成してください。

既知の制限

ブラウザのサポート

CSS Shadow Parts は、すべての主要ブラウザの最新バージョンでサポートされています。ただし、古いバージョンではシャドウパーツをサポートしていないものもあります。アプリケーションにPartを実装する前に、browser supportで要件を満たしていることを確認してください。古いバージョンのブラウザのサポートが必要な場合は、スタイル設定に CSS変数 を引き続き使用することをお勧めします。

ベンダー固定の擬似要素

Vendor固定の擬似要素は、現時点ではサポートされていません。たとえば、 ::-webkit-scrollbar 擬似要素は動きません。

/* Does NOT work */
my-component::part(scroll)::-webkit-scrollbar {
  background: green;
}
CopyCopied

詳細は this issue on GitHub をご覧ください。

構造擬似クラス

ほとんどの擬似クラスはパートでサポートされていますが、構造擬似クラスはサポートされていません。動作しない擬似クラスの例を以下に示します。

/* Does NOT work */
my-component::part(container):first-child {
  background: green;
}

/* Does NOT work */
my-component::part(container):last-child {
  background: green;
}
CopyCopied

Partの連鎖

::part() 疑似要素は、追加の ::part() に一致しません。

たとえば、my-component::part (button) ::part (label) は一致しません。これは、この指定で意図したより多くの構造的な情報を暴露するからです。

<my-component> の内部ボタンが part="label => button-label" のようなものを使用してボタンの内部パーツをパネルの独自のパーツ要素マップに転送する場合、my-component::part(button-label) のようなセレクタは、1つのボタンのラベルだけを選択し、他のラベルは無視します。

Previous
CSS Variables
Next
Colors