feat(config): add appRootSelector to initialize options

Author: Tanner Reits

core/api.txt

@@ -884,7 +884,7 @@ ion-infinite-scroll-content,prop,theme,"ios" | "md" | "ionic",undefined,false,fa
 
 ion-input,scoped
 ion-input,prop,autocapitalize,string,'off',false,false
-ion-input,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
+ion-input,prop,autocomplete,"name" | "url" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "nickname" | "organization-title" | "cc-additional-name" | "language" | "bday" | "sex" | "impp" | "photo",'off',false,false
 ion-input,prop,autocorrect,"off" | "on",'off',false,false
 ion-input,prop,autofocus,boolean,false,false,false
 ion-input,prop,clearInput,boolean,false,false,false
@@ -1867,7 +1867,7 @@ ion-row,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
 ion-searchbar,prop,autocapitalize,string,'off',false,false
-ion-searchbar,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
+ion-searchbar,prop,autocomplete,"name" | "url" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "nickname" | "organization-title" | "cc-additional-name" | "language" | "bday" | "sex" | "impp" | "photo",'off',false,false
 ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
 ion-searchbar,prop,cancelButtonIcon,string | undefined,undefined,false,false
 ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false

core/src/components/content/content.tsx

@@ -6,6 +6,7 @@ import { isPlatform } from '@utils/platform';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext } from '@utils/theme';
 
+import { config } from '../../global/config';
 import { getIonMode, getIonTheme } from '../../global/ionic-global';
 import type { Color, Mode } from '../../interface';
 
@@ -518,7 +519,8 @@ const getPageElement = (el: HTMLElement) => {
    * between the popover and the edges of the screen. But if the popover contains
    * its own page element, we should use that instead.
    */
-  const page = el.closest('ion-app, ion-page, .ion-page, page-inner, .popover-content');
+  const appRootSelector = config.get('appRootSelector', 'ion-app');
+  const page = el.closest(`${appRootSelector}, ion-page, .ion-page, page-inner, .popover-content`);
   if (page) {
     return page;
   }

core/src/components/footer/footer.tsx

@@ -4,6 +4,7 @@ import { findIonContent, getScrollElement, printIonContentErrorMsg } from '@util
 import type { KeyboardController } from '@utils/keyboard/keyboard-controller';
 import { createKeyboardController } from '@utils/keyboard/keyboard-controller';
 
+import { config } from '../../global/config';
 import { getIonTheme } from '../../global/ionic-global';
 
 import { handleFooterFade } from './footer.utils';
@@ -86,7 +87,8 @@ export class Footer implements ComponentInterface {
     this.destroyCollapsibleFooter();
 
     if (hasFade) {
-      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+      const appRootSelector = config.get('appRootSelector', 'ion-app');
+      const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
       const contentEl = pageEl ? findIonContent(pageEl) : null;
 
       if (!contentEl) {

core/src/components/header/header.tsx

@@ -5,6 +5,7 @@ import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes } from '@utils/helpers';
 import { hostContext } from '@utils/theme';
 
+import { config } from '../../global/config';
 import { getIonTheme } from '../../global/ionic-global';
 
 import {
@@ -92,7 +93,8 @@ export class Header implements ComponentInterface {
     this.destroyCollapsibleHeader();
 
     if (hasCondense) {
-      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+      const appRootSelector = config.get('appRootSelector', 'ion-app');
+      const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
       const contentEl = pageEl ? findIonContent(pageEl) : null;
 
       // Cloned elements are always needed in iOS transition
@@ -104,7 +106,7 @@ export class Header implements ComponentInterface {
 
       await this.setupCondenseHeader(contentEl, pageEl);
     } else if (hasFade) {
-      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+      const pageEl = this.el.closest('ion-app,.ion-app,ion-page,.ion-page,page-inner');
       const contentEl = pageEl ? findIonContent(pageEl) : null;
 
       if (!contentEl) {

core/src/utils/config.ts

@@ -124,6 +124,14 @@ export interface IonicConfig {
    */
   toastDuration?: number;
 
+  /**
+   * The selector that will be used to query the root of the Ionic application.
+   * This element is used for things like injecting overlay elements into the DOM and managing focus.
+   *
+   * @default 'ion-app'
+   */
+  appRootSelector?: string;
+
   /**
    * Overrides the toggle icon for all `ion-accordion` components.
    */

core/src/utils/framework-delegate.ts

@@ -1,3 +1,4 @@
+import { config } from '../global/config';
 import type { ComponentRef, FrameworkDelegate } from '../interface';
 
 import { componentOnReady } from './helpers';
@@ -128,7 +129,8 @@ export const CoreDelegate = () => {
      * Get the root of the app and
      * add the overlay there.
      */
-    const app = document.querySelector('ion-app') || document.body;
+    const appRootSelector = config.get('appRootSelector', 'ion-app');
+    const app = document.querySelector(appRootSelector) || document.body;
 
     /**
      * Create a placeholder comment so that

core/src/utils/helpers.ts

@@ -1,6 +1,7 @@
 import type { EventEmitter } from '@stencil/core';
 
 import type { Side } from '../components/menu/menu-interface';
+import { config } from '../global/config';
 
 // TODO(FW-2832): types
 
@@ -266,7 +267,8 @@ export const focusVisibleElement = (el: HTMLElement) => {
    * which will let us explicitly set the elements to focus.
    */
   if (el.classList.contains('ion-focusable')) {
-    const app = el.closest('ion-app');
+    const appRootSelector = config.get('appRootSelector', 'ion-app');
+    const app = el.closest(appRootSelector) as HTMLIonAppElement | null;
     if (app) {
       app.setFocus([el]);
     }

core/src/utils/keyboard/keyboard-controller.ts

@@ -1,5 +1,6 @@
 import { doc, win } from '@utils/browser';
 
+import { config } from '../../global/config';
 import { Keyboard, KeyboardResize } from '../native/keyboard';
 
 /**
@@ -25,7 +26,8 @@ const getResizeContainer = (resizeMode?: KeyboardResize): HTMLElement | null =>
    * on that. In the event `ion-app` is not available then
    * we can fall back to `body`.
    */
-  const ionApp = doc.querySelector('ion-app');
+  const appRootSelector = config.get('appRootSelector', 'ion-app');
+  const ionApp = doc.querySelector(appRootSelector) as HTMLIonAppElement | null;
 
   return ionApp ?? doc.body;
 };

core/src/utils/overlays.ts

@@ -697,7 +697,8 @@ export const dismiss = async <OverlayDismissOptions>(
 };
 
 const getAppRoot = (doc: Document) => {
-  return doc.querySelector('ion-app') || doc.body;
+  const appRootSelector = config.get('appRootSelector', 'ion-app');
+  return doc.querySelector(appRootSelector) || doc.body;
 };
 
 const overlayAnimation = async (