Projection container support

Choose the existing DOM element that occupies the native surface's intended location and Web layer. These tables apply to projectionSelector and the element passed to createWebProjectionScope, for both Capacitor and Cordova.

⭕️ means the element can contain the Engine's projected image under the stated conditions. ❌ means it is not a supported direct destination; select a suitable surrounding container instead. This is a DOM presentation contract, not a promise that the Engine implements that component's native control, interactions or animations. Native capture eligibility is a separate requirement.

Shared requirements

• Provide one connected HTML element with a nonzero, unfragmented layout box. Its size, placement and layer belong to the application. For inline hosts, use display: inline-block or block and give them the intended dimensions.
• projectionSelector uses document CSS selectors (ID, class, attribute or descendant). It must match exactly one element and does not enter Shadow DOM. A missing element can be created later; zero or multiple matches keep Native hidden.
• The retained image is inserted in the element's open ShadowRoot, or as a light-DOM child otherwise. Closed shadow content must inherit the host's visibility and expose a slot that can display the image.
• An overlay, collapsed item or inactive page is eligible only while it has a visible layout box. Do not force hidden configuration elements to render just to use them as destinations.
• Host/ancestor clipping, opacity, transforms and filters still affect the image. The image is noninteractive and freezes the captured appearance. See projection behavior for lifecycle, mutation-observer exclusions and native capture limits.

HTML containers

Ionic elements

The following inventory covers every component in the Ionic API index, with one row per element. It was checked against @ionic/core 9.0.9; ion-icon is supplied by Ionicons. The final table separately lists the additional internal component shipped in that version.

Ionic custom elements are not the HTML elements with similar names: ion-select, ion-input, ion-textarea and ion-img can be image containers, while HTML select, input, textarea and img cannot. Every ⭕️ below still requires the shared layout conditions above and the component's normal Ionic parent/context.

Buttons and toolbar

Forms and selection

Content and layout

Cards, text and media

Lists and gestures

Navigation and tabs

Overlays, menus and FAB

Internal component

Wrapping an unsupported element

Select #seat-projection, not the HTML select:

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

The control's DOM, value and event listeners survive handoff. The plugin still owns native behavior and value synchronization; the prepared image does not accept input.

Verification scope

Temporary Chromium and WebKit probes exercise the Ionic inventory with an explicit layout box, required parents and visible states. A solid-color prepared image checks placement and visible pixel coverage; the probes also check original child identity/value preservation and removal of Engine images on teardown. Configuration elements are checked for the absence of a renderable box. The refresher probe selects its active CSS state; it does not validate the pull gesture. Animated loading indicators can change between the before/after captures.

In both browsers, all 90 supported public Ionic elements had zero measured image-frame difference, full solid-color coverage in the inspected interior, preserved original children/values and no retained Engine image after destruction. The four public configuration elements had no renderable box. The internal component was also probed but remains outside the supported public contract. HTML probes cover 41 element/layout combinations, including open and closed shadow roots.

These are DOM-container checks, not native capture, SDK eligibility or complete Ionic interaction tests. They do not guarantee every theme, closed-shadow implementation or application stylesheet. The probes are not part of the library's permanent test suite.