Prise en charge des conteneurs de projection

Choisissez l’élément DOM existant qui occupe l’emplacement et la couche Web prévus pour la surface native. Ces tableaux s’appliquent à projectionSelector et à l’élément passé à createWebProjectionScope, pour Capacitor comme pour Cordova.

⭕️ signifie que l’élément peut contenir l’image projetée de l’Engine dans les conditions indiquées. ❌ signifie qu’il n’est pas une destination directe prise en charge ; choisissez plutôt un conteneur englobant adapté. Il s’agit d’un contrat de présentation DOM, pas d’une promesse que l’Engine implémente le contrôle natif, les interactions ou les animations de ce composant. L’éligibilité à la capture native est une exigence distincte.

Exigences communes

• Fournissez un seul élément HTML connecté avec une boîte de mise en page non fragmentée et de taille non nulle. Sa taille, son placement et sa couche relèvent de l’application. Pour les hôtes inline, utilisez display: inline-block ou block et donnez-leur les dimensions voulues.
• projectionSelector utilise les sélecteurs CSS du document (ID, classe, attribut ou descendant). Il doit correspondre à un seul élément et ne pénètre pas dans le Shadow DOM. Un élément absent peut être créé plus tard ; zéro ou plusieurs correspondances maintiennent Native masqué.
• L’image conservée est insérée dans le ShadowRoot ouvert de l’élément, ou sinon comme enfant du light DOM. Le contenu shadow fermé doit hériter de la visibilité de l’hôte et exposer un slot capable d’afficher l’image.
• Une superposition, un élément replié ou une page inactive n’est éligible que lorsqu’il dispose d’une boîte de mise en page visible. Ne forcez pas le rendu d’éléments de configuration masqués uniquement pour les utiliser comme destinations.
• Le rognage, l’opacité, les transformations et les filtres de l’hôte et de ses ancêtres affectent toujours l’image. Celle-ci n’est pas interactive et fige l’apparence capturée. Consultez le comportement de projection pour le cycle de vie, les exclusions des observateurs de mutations et les limites de capture native.

Conteneurs HTML

Éléments Ionic

L’inventaire suivant couvre tous les composants de l’index de l’API Ionic, avec une ligne par élément. Il a été vérifié avec @ionic/core 9.0.9 ; ion-icon est fourni par Ionicons. Le dernier tableau répertorie séparément le composant interne supplémentaire livré dans cette version.

Les éléments personnalisés Ionic ne sont pas les éléments HTML aux noms similaires : ion-select, ion-input, ion-textarea et ion-img peuvent contenir une image, contrairement aux éléments HTML select, input, textarea et img. Chaque ⭕️ ci-dessous exige toujours les conditions de mise en page communes ci-dessus et le parent/contexte Ionic habituel du composant.

Boutons et barre d’outils

Formulaires et sélection

Contenu et mise en page

Cartes, texte et médias

Listes et gestes

Navigation et onglets

Superpositions, menus et FAB

Composant interne

Entourer un élément non pris en charge

Sélectionnez #seat-projection, pas le select HTML :

<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>

Le DOM du contrôle, sa valeur et ses écouteurs d’événements survivent au transfert. Le plugin reste responsable du comportement natif et de la synchronisation des valeurs ; l’image préparée n’accepte pas de saisie.

Périmètre de vérification

Des sondes temporaires Chromium et WebKit testent l’inventaire Ionic avec une boîte de mise en page explicite, les parents requis et des états visibles. Une image préparée de couleur unie vérifie le placement et la couverture des pixels visibles ; les sondes vérifient aussi la préservation de l’identité/des valeurs des enfants d’origine et la suppression des images de l’Engine lors du démontage. Pour les éléments de configuration, elles vérifient l’absence de boîte affichable. La sonde du refresher sélectionne son état CSS actif ; elle ne valide pas le geste de traction. Les indicateurs de chargement animés peuvent changer entre les captures avant/après.

Dans les deux navigateurs, les 90 éléments Ionic publics pris en charge présentaient un écart mesuré nul du cadre de l’image, une couverture complète de couleur unie dans la zone intérieure inspectée, la conservation des enfants/valeurs d’origine et aucune image de l’Engine conservée après destruction. Les quatre éléments de configuration publics n’avaient pas de boîte affichable. Le composant interne a également été testé, mais reste en dehors du contrat public pris en charge. Les sondes HTML couvrent 41 combinaisons d’éléments et de mise en page, y compris les racines shadow ouvertes et fermées.

Il s’agit de contrôles des conteneurs DOM, pas de tests de capture native, d’éligibilité SDK ou de l’ensemble des interactions Ionic. Ils ne garantissent pas le fonctionnement de chaque thème, implémentation de shadow fermé ou feuille de style applicative. Ces sondes ne font pas partie de la suite de tests permanente de la bibliothèque.