投影コンテナの対応状況

ネイティブサーフェスの意図した位置とWebレイヤーを占める、既存のDOM要素を選んでください。この対応表は、CapacitorとCordovaの両方で、projectionSelectorとcreateWebProjectionScopeに渡す要素に適用されます。

⭕️ は、記載した条件下でEngineの投影画像を要素内に保持できることを示します。❌ は直接の投影先として非対応であり、周囲の適切なコンテナを選ぶ必要があることを示します。これはDOM上の表示仕様であり、Engineがそのコンポーネントのネイティブコントロール、操作、アニメーションを実装するという保証ではありません。ネイティブキャプチャの適格性は、別途満たす必要があります。

共通の要件

• ドキュメントに接続されたHTML要素を1つ用意し、サイズがゼロでなく、分断されていないレイアウトボックスを持たせてください。サイズ、配置、レイヤーはアプリケーション側の責務です。インラインのホストにはdisplay: inline-blockまたはblockを使い、意図した寸法を与えてください。
• projectionSelectorはドキュメントのCSSセレクター（ID、クラス、属性、子孫）を使います。正確に1つの要素に一致する必要があり、Shadow DOM内には入りません。存在しない要素は後から作成できます。一致がゼロまたは複数の場合、Nativeは非表示のままです。
• 保持する画像は、要素のopen ShadowRoot内へ挿入し、それがなければlight DOMの子として挿入します。closed shadowのコンテンツはホストのvisibilityを継承し、画像を表示できるslotを公開する必要があります。
• オーバーレイ、折りたたまれた項目、非アクティブなページは、表示されるレイアウトボックスを持つ間だけ対象になります。投影先に使うためだけに、非表示の設定用要素を強制的に描画しないでください。
• ホストと祖先のクリッピング、不透明度、変形、フィルターは引き続き画像に適用されます。画像は操作できず、キャプチャ時の外観を静止した状態で保持します。ライフサイクル、MutationObserverの除外条件、ネイティブキャプチャの制約は、投影の動作を参照してください。

HTMLコンテナ

Ionicの要素

以下の一覧はIonic APIインデックスの全コンポーネントを網羅し、要素ごとに1行を設けています。@ionic/core 9.0.9で確認しました。ion-iconはIoniconsから提供されます。最後の表には、このバージョンに同梱される追加の内部コンポーネントを別に記載しています。

Ionicのカスタム要素と、似た名前のHTML要素は別物です。ion-select、ion-input、ion-textarea、ion-imgは画像コンテナにできますが、HTMLのselect、input、textarea、imgは使えません。以下のすべての⭕️には、上記の共通レイアウト条件と、そのコンポーネントの通常のIonicの親要素・コンテキストが必要です。

ボタンとツールバー

フォームと選択

コンテンツとレイアウト

カード、テキスト、メディア

リストとジェスチャー

ナビゲーションとタブ

オーバーレイ、メニュー、FAB

内部コンポーネント

非対応要素のラップ

HTMLのselectではなく、#seat-projectionを選んでください。

<span id="seat-projection" style="display: inline-block; width: 12rem; height: 2.75rem">
  <select aria-label="Seat" style="width: 100%; height: 100%">
    <option>Any seat</option>
  </select>
</span>

コントロールのDOM、値、イベントリスナーは切り替えをまたいで保持されます。ネイティブの動作と値の同期は引き続きプラグインが管理し、準備済み画像は入力を受け付けません。

検証の範囲

一時的なChromium・WebKitの検証コードで、明示的なレイアウトボックス、必要な親要素、表示状態を用意してIonicの一覧を検証しています。単色の準備済み画像で配置と可視ピクセルの被覆を調べ、元の子要素の同一性・値の保持と、終了処理時のEngine画像の削除も確認しています。設定用要素では、描画可能なボックスがないことを確認します。refresherの検証はアクティブなCSS状態を選ぶもので、引っ張るジェスチャーは検証しません。アニメーションする読み込みインジケーターは、前後のキャプチャ間で変化する場合があります。

両ブラウザーで、対応する公開Ionic要素90個すべてについて、計測した画像フレームの差はゼロで、検査した内側の領域は単色で完全に覆われ、元の子要素・値が保持され、破棄後にEngine画像が残らないことを確認しました。公開の設定用要素4個には、描画可能なボックスがありませんでした。内部コンポーネントも検証しましたが、公開された対応仕様には引き続き含めません。HTMLの検証では、open・closed shadow rootを含む41通りの要素とレイアウトの組み合わせを確認しています。

これらはDOMコンテナの検証であり、ネイティブキャプチャ、SDKの適格性、Ionicの操作全体を検証するものではありません。あらゆるテーマ、closed shadowの実装、アプリケーションのスタイルシートでの動作を保証するものでもありません。この検証コードは、ライブラリの恒久的なテストスイートには含まれていません。