Ionic Frameworkは最近、CSS Shadow Partsという次期W3C仕様を採用した。これによりコンポーネントのテーマ設定と変更が簡単になる。
Ionic Framework 4以降、そのコアコンポーネントはWeb Componentsとして書き直された。これよりIonicは複数のJavaScriptフレームワーク（Angular、React、Vue.js、ネイティブJavaScript）でコンポーネントを共有できるようになったが、開発者によるコンポーネントの変更が制限されるという望ましくない副作用があった。
Web ComponentsはShadow DOMを使用することで、CSSスタイルがコンポーネント内外に漏れるのを防ぐことができる。インポートしたコンポーネントがグローバルCSSに影響されるのを防ぐことには、明らかにメリットがあるのだが、開発者はCSSをカスタマイズしたり、インポートしたWeb Componentsをアプリケーションのテーマに適合させたりすることができなくなる。
Ionicではこうした制限に対応しやすいよう、全コンポーネントで使われる一連のCSSカスタムプロパティを採用した。開発者はWeb ComponentsのCSSスタイルを直接変更することはできないが、これらスタイルはShadow DOM内でラップされており、渡されるCSSプロパティ値を変更できるようになっていた。
しかし、これは単純なユースケースでは機能したのだが、コンポーネントのデザイン全てをCSSプロパティ経由で公開するのは困難だった。CSSファイルのサイズを不必要に増加させる一方、完全にロックされた部分も残ってしまっていた。
この制限を解決するため、IonicはCSS Shadow Partsを採用した。この新しい仕様はもともと2018年末にリリースされたものだが、ようやく主要なブラウザ全てに搭載されて、Ionicに組み込めるようになった。
その名の通り、CSS Shadow Partsは'part'という新しいHTMLプロパティ定義することで、外部操作が可能になるShadow DOMのパーツを識別する。例えば、アップデートされたion-selectコンポーネントは次のようになっている。
<ion-select>
#shadow-root
<div part=”placeholder” class=”select-text select-placeholder”></div>
<div part=”icon” class=”select-icon”></div>
</ion-select>
新しいタグの導入により、マッチするpart属性を持つShadow tree内の要素を表す新しい ::part CSS擬似要素を使うことで、開発者は公開されたCSS Shadow Partsを利用できるようになる。
先ほどの例でplaceholder partを変更するには、次のCSSを使えばよい。
ion-select::part(placeholder) {
color: red;
min-width: 100px;
}
まだいくらか制限はあるが、新しいセレクタは擬似要素と擬似クラスで動作する。
サポートされるコンポーネントと公開されるパーツの完全なリストは、Ionic blogを参照してほしい。
Ionicはオープンソースプロジェクトであり、MITライセンスのもと利用できる。Ionic GitHubプロジェクトを介したコントリビューションとフィードバックが推奨されており、Ionicのコントリビューションガイドラインと行動規範に従わなくてはならない。