BT

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

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。