原文(投稿日：2020/08/18)へのリンク

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のコントリビューションガイドラインと行動規範に従わなくてはならない。

関連記事:

• デベロップメント
• CSS
• Markup Languages
• Webフレームワーク
• Architecture
• モバイル

We protect your privacy.