BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース IonicがShadow Partsでカスタマイズを改善

IonicがShadow Partsでカスタマイズを改善

ブックマーク

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

この記事に星をつける

おすすめ度
スタイル

BT