diff --git a/angular/src/directives/angular-component-lib/utils.ts b/angular/src/directives/angular-component-lib/utils.ts
index 5c5ac108ae..d6cf7bd49e 100644
--- a/angular/src/directives/angular-component-lib/utils.ts
+++ b/angular/src/directives/angular-component-lib/utils.ts
@@ -32,13 +32,30 @@ export const proxyOutputs = (instance: any, el: any, events: string[]) => {
   events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
 }
 
-export function ProxyCmp(opts: { inputs?: any; methods?: any }) {
-  const decorator = function(cls: any) {
-    if (opts.inputs) {
-      proxyInputs(cls, opts.inputs);
+export const defineCustomElement = (tagName: string, customElement: any) => {
+  if (
+    customElement !== undefined &&
+    typeof customElements !== 'undefined' &&
+    !customElements.get(tagName)
+  ) {
+    customElements.define(tagName, customElement);
+  }
+}
+
+// tslint:disable-next-line: only-arrow-functions
+export function ProxyCmp(opts: { defineCustomElementFn?: () => void, inputs?: any; methods?: any }) {
+  const decorator = function (cls: any) {
+    const { defineCustomElementFn, inputs, methods } = opts;
+
+    if (defineCustomElementFn !== undefined) {
+      defineCustomElementFn();
     }
-    if (opts.methods) {
-      proxyMethods(cls, opts.methods);
+
+    if (inputs) {
+      proxyInputs(cls, inputs);
+    }
+    if (methods) {
+      proxyMethods(cls, methods);
     }
     return cls;
   };
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index e7e1cb97d8..529ac88d23 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -6,9 +6,12 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
 import { Components } from '@ionic/core';
 
 
+
+
 export declare interface IonAccordion extends Components.IonAccordion {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value']
 })
 @Component({
@@ -25,7 +28,7 @@ export class IonAccordion {
   }
 }
 
-import { AccordionGroupChangeEventDetail as IAccordionGroupAccordionGroupChangeEventDetail } from '@ionic/core';
+import type { AccordionGroupChangeEventDetail as IAccordionGroupAccordionGroupChangeEventDetail } from '@ionic/core';
 export declare interface IonAccordionGroup extends Components.IonAccordionGroup {
   /**
    * Emitted when the value property has changed. 
@@ -35,6 +38,7 @@ export declare interface IonAccordionGroup extends Components.IonAccordionGroup
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'value']
 })
 @Component({
@@ -55,7 +59,9 @@ export class IonAccordionGroup {
 
 export declare interface IonApp extends Components.IonApp {}
 
-
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
 @Component({
   selector: 'ion-app',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -72,7 +78,9 @@ export class IonApp {
 
 export declare interface IonAvatar extends Components.IonAvatar {}
 
-
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
 @Component({
   selector: 'ion-avatar',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -90,6 +98,7 @@ export class IonAvatar {
 export declare interface IonBackButton extends Components.IonBackButton {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type']
 })
 @Component({
@@ -116,6 +125,7 @@ export declare interface IonBackdrop extends Components.IonBackdrop {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['stopPropagation', 'tappable', 'visible']
 })
 @Component({
@@ -137,6 +147,7 @@ export class IonBackdrop {
 export declare interface IonBadge extends Components.IonBadge {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode']
 })
 @Component({
@@ -167,6 +178,7 @@ export declare interface IonBreadcrumb extends Components.IonBreadcrumb {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['active', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'separator', 'target']
 })
 @Component({
@@ -184,7 +196,7 @@ export class IonBreadcrumb {
   }
 }
 
-import { BreadcrumbCollapsedClickEventDetail as IBreadcrumbsBreadcrumbCollapsedClickEventDetail } from '@ionic/core';
+import type { BreadcrumbCollapsedClickEventDetail as IBreadcrumbsBreadcrumbCollapsedClickEventDetail } from '@ionic/core';
 export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
   /**
    * Emitted when the collapsed indicator is clicked on. 
@@ -194,6 +206,7 @@ export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode']
 })
 @Component({
@@ -225,6 +238,7 @@ export declare interface IonButton extends Components.IonButton {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type']
 })
 @Component({
@@ -246,6 +260,7 @@ export class IonButton {
 export declare interface IonButtons extends Components.IonButtons {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['collapse']
 })
 @Component({
@@ -266,6 +281,7 @@ export class IonButtons {
 export declare interface IonCard extends Components.IonCard {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type']
 })
 @Component({
@@ -286,6 +302,7 @@ export class IonCard {
 export declare interface IonCardContent extends Components.IonCardContent {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['mode']
 })
 @Component({
@@ -306,6 +323,7 @@ export class IonCardContent {
 export declare interface IonCardHeader extends Components.IonCardHeader {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode', 'translucent']
 })
 @Component({
@@ -326,6 +344,7 @@ export class IonCardHeader {
 export declare interface IonCardSubtitle extends Components.IonCardSubtitle {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode']
 })
 @Component({
@@ -346,6 +365,7 @@ export class IonCardSubtitle {
 export declare interface IonCardTitle extends Components.IonCardTitle {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode']
 })
 @Component({
@@ -362,7 +382,7 @@ export class IonCardTitle {
   }
 }
 
-import { CheckboxChangeEventDetail as ICheckboxCheckboxChangeEventDetail } from '@ionic/core';
+import type { CheckboxChangeEventDetail as ICheckboxCheckboxChangeEventDetail } from '@ionic/core';
 export declare interface IonCheckbox extends Components.IonCheckbox {
   /**
    * Emitted when the checked property has changed. 
@@ -380,6 +400,7 @@ export declare interface IonCheckbox extends Components.IonCheckbox {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['checked', 'color', 'disabled', 'indeterminate', 'mode', 'name', 'value']
 })
 @Component({
@@ -401,6 +422,7 @@ export class IonCheckbox {
 export declare interface IonChip extends Components.IonChip {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'disabled', 'mode', 'outline']
 })
 @Component({
@@ -421,6 +443,7 @@ export class IonChip {
 export declare interface IonCol extends Components.IonCol {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs']
 })
 @Component({
@@ -437,8 +460,8 @@ export class IonCol {
   }
 }
 
-import { ScrollBaseDetail as IContentScrollBaseDetail } from '@ionic/core';
-import { ScrollDetail as IContentScrollDetail } from '@ionic/core';
+import type { ScrollBaseDetail as IContentScrollBaseDetail } from '@ionic/core';
+import type { ScrollDetail as IContentScrollDetail } from '@ionic/core';
 export declare interface IonContent extends Components.IonContent {
   /**
    * Emitted when the scroll has started. 
@@ -457,6 +480,7 @@ Look at the property: `scrollEvents`
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'],
   methods: ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint']
 })
@@ -475,7 +499,7 @@ export class IonContent {
   }
 }
 
-import { DatetimeChangeEventDetail as IDatetimeDatetimeChangeEventDetail } from '@ionic/core';
+import type { DatetimeChangeEventDetail as IDatetimeDatetimeChangeEventDetail } from '@ionic/core';
 export declare interface IonDatetime extends Components.IonDatetime {
   /**
    * Emitted when the datetime selection was cancelled. 
@@ -497,6 +521,7 @@ export declare interface IonDatetime extends Components.IonDatetime {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'name', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues'],
   methods: ['confirm', 'reset', 'cancel']
 })
@@ -519,6 +544,7 @@ export class IonDatetime {
 export declare interface IonFab extends Components.IonFab {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['activated', 'edge', 'horizontal', 'vertical'],
   methods: ['close']
 })
@@ -550,6 +576,7 @@ export declare interface IonFabButton extends Components.IonFabButton {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']
 })
 @Component({
@@ -571,6 +598,7 @@ export class IonFabButton {
 export declare interface IonFabList extends Components.IonFabList {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['activated', 'side']
 })
 @Component({
@@ -591,6 +619,7 @@ export class IonFabList {
 export declare interface IonFooter extends Components.IonFooter {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['collapse', 'mode', 'translucent']
 })
 @Component({
@@ -611,6 +640,7 @@ export class IonFooter {
 export declare interface IonGrid extends Components.IonGrid {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['fixed']
 })
 @Component({
@@ -631,6 +661,7 @@ export class IonGrid {
 export declare interface IonHeader extends Components.IonHeader {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['collapse', 'mode', 'translucent']
 })
 @Component({
@@ -651,6 +682,7 @@ export class IonHeader {
 export declare interface IonIcon extends Components.IonIcon {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src']
 })
 @Component({
@@ -685,6 +717,7 @@ export declare interface IonImg extends Components.IonImg {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['alt', 'src']
 })
 @Component({
@@ -715,6 +748,7 @@ your async operation has completed.
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['disabled', 'position', 'threshold'],
   methods: ['complete']
 })
@@ -737,6 +771,7 @@ export class IonInfiniteScroll {
 export declare interface IonInfiniteScrollContent extends Components.IonInfiniteScrollContent {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['loadingSpinner', 'loadingText']
 })
 @Component({
@@ -753,7 +788,7 @@ export class IonInfiniteScrollContent {
   }
 }
 
-import { InputChangeEventDetail as IInputInputChangeEventDetail } from '@ionic/core';
+import type { InputChangeEventDetail as IInputInputChangeEventDetail } from '@ionic/core';
 export declare interface IonInput extends Components.IonInput {
   /**
    * Emitted when a keyboard input occurred. 
@@ -775,6 +810,7 @@ export declare interface IonInput extends Components.IonInput {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'type', 'value'],
   methods: ['setFocus', 'getInputElement']
 })
@@ -797,6 +833,7 @@ export class IonInput {
 export declare interface IonItem extends Components.IonItem {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['button', 'color', 'counter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type']
 })
 @Component({
@@ -817,6 +854,7 @@ export class IonItem {
 export declare interface IonItemDivider extends Components.IonItemDivider {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode', 'sticky']
 })
 @Component({
@@ -836,7 +874,9 @@ export class IonItemDivider {
 
 export declare interface IonItemGroup extends Components.IonItemGroup {}
 
-
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
 @Component({
   selector: 'ion-item-group',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -854,6 +894,7 @@ export class IonItemGroup {
 export declare interface IonItemOption extends Components.IonItemOption {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type']
 })
 @Component({
@@ -880,6 +921,7 @@ export declare interface IonItemOptions extends Components.IonItemOptions {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['side']
 })
 @Component({
@@ -907,6 +949,7 @@ export declare interface IonItemSliding extends Components.IonItemSliding {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['disabled'],
   methods: ['getOpenAmount', 'getSlidingRatio', 'open', 'close', 'closeOpened']
 })
@@ -929,6 +972,7 @@ export class IonItemSliding {
 export declare interface IonLabel extends Components.IonLabel {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode', 'position']
 })
 @Component({
@@ -949,6 +993,7 @@ export class IonLabel {
 export declare interface IonList extends Components.IonList {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['inset', 'lines', 'mode'],
   methods: ['closeSlidingItems']
 })
@@ -970,6 +1015,7 @@ export class IonList {
 export declare interface IonListHeader extends Components.IonListHeader {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'lines', 'mode']
 })
 @Component({
@@ -1008,6 +1054,7 @@ export declare interface IonMenu extends Components.IonMenu {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type'],
   methods: ['isOpen', 'isActive', 'open', 'close', 'toggle', 'setOpen']
 })
@@ -1030,6 +1077,7 @@ export class IonMenu {
 export declare interface IonMenuButton extends Components.IonMenuButton {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type']
 })
 @Component({
@@ -1050,6 +1098,7 @@ export class IonMenuButton {
 export declare interface IonMenuToggle extends Components.IonMenuToggle {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['autoHide', 'menu']
 })
 @Component({
@@ -1080,6 +1129,7 @@ export declare interface IonNav extends Components.IonNav {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'],
   methods: ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']
 })
@@ -1102,6 +1152,7 @@ export class IonNav {
 export declare interface IonNavLink extends Components.IonNavLink {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection']
 })
 @Component({
@@ -1122,6 +1173,7 @@ export class IonNavLink {
 export declare interface IonNote extends Components.IonNote {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode']
 })
 @Component({
@@ -1142,6 +1194,7 @@ export class IonNote {
 export declare interface IonProgressBar extends Components.IonProgressBar {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value']
 })
 @Component({
@@ -1172,6 +1225,7 @@ export declare interface IonRadio extends Components.IonRadio {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'disabled', 'mode', 'name', 'value']
 })
 @Component({
@@ -1189,7 +1243,7 @@ export class IonRadio {
   }
 }
 
-import { RadioGroupChangeEventDetail as IRadioGroupRadioGroupChangeEventDetail } from '@ionic/core';
+import type { RadioGroupChangeEventDetail as IRadioGroupRadioGroupChangeEventDetail } from '@ionic/core';
 export declare interface IonRadioGroup extends Components.IonRadioGroup {
   /**
    * Emitted when the value has changed. 
@@ -1199,6 +1253,7 @@ export declare interface IonRadioGroup extends Components.IonRadioGroup {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['allowEmptySelection', 'name', 'value']
 })
 @Component({
@@ -1216,7 +1271,7 @@ export class IonRadioGroup {
   }
 }
 
-import { RangeChangeEventDetail as IRangeRangeChangeEventDetail } from '@ionic/core';
+import type { RangeChangeEventDetail as IRangeRangeChangeEventDetail } from '@ionic/core';
 export declare interface IonRange extends Components.IonRange {
   /**
    * Emitted when the value property has changed. 
@@ -1234,6 +1289,7 @@ export declare interface IonRange extends Components.IonRange {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
 })
 @Component({
@@ -1251,7 +1307,7 @@ export class IonRange {
   }
 }
 
-import { RefresherEventDetail as IRefresherRefresherEventDetail } from '@ionic/core';
+import type { RefresherEventDetail as IRefresherRefresherEventDetail } from '@ionic/core';
 export declare interface IonRefresher extends Components.IonRefresher {
   /**
    * Emitted when the user lets go of the content and has pulled down
@@ -1272,6 +1328,7 @@ called when the async operation has completed.
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
   methods: ['complete', 'cancel', 'getProgress']
 })
@@ -1294,6 +1351,7 @@ export class IonRefresher {
 export declare interface IonRefresherContent extends Components.IonRefresherContent {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText']
 })
 @Component({
@@ -1313,7 +1371,9 @@ export class IonRefresherContent {
 
 export declare interface IonReorder extends Components.IonReorder {}
 
-
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
 @Component({
   selector: 'ion-reorder',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1327,7 +1387,7 @@ export class IonReorder {
   }
 }
 
-import { ItemReorderEventDetail as IReorderGroupItemReorderEventDetail } from '@ionic/core';
+import type { ItemReorderEventDetail as IReorderGroupItemReorderEventDetail } from '@ionic/core';
 export declare interface IonReorderGroup extends Components.IonReorderGroup {
   /**
    * Event that needs to be listened to in order to complete the reorder action.
@@ -1339,6 +1399,7 @@ to be called in order to finalize the reorder action.
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['disabled'],
   methods: ['complete']
 })
@@ -1361,6 +1422,7 @@ export class IonReorderGroup {
 export declare interface IonRippleEffect extends Components.IonRippleEffect {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['type'],
   methods: ['addRipple']
 })
@@ -1381,7 +1443,9 @@ export class IonRippleEffect {
 
 export declare interface IonRow extends Components.IonRow {}
 
-
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
 @Component({
   selector: 'ion-row',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1395,7 +1459,7 @@ export class IonRow {
   }
 }
 
-import { SearchbarChangeEventDetail as ISearchbarSearchbarChangeEventDetail } from '@ionic/core';
+import type { SearchbarChangeEventDetail as ISearchbarSearchbarChangeEventDetail } from '@ionic/core';
 export declare interface IonSearchbar extends Components.IonSearchbar {
   /**
    * Emitted when a keyboard input occurred. 
@@ -1425,6 +1489,7 @@ export declare interface IonSearchbar extends Components.IonSearchbar {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
   methods: ['setFocus', 'getInputElement']
 })
@@ -1443,7 +1508,7 @@ export class IonSearchbar {
   }
 }
 
-import { SegmentChangeEventDetail as ISegmentSegmentChangeEventDetail } from '@ionic/core';
+import type { SegmentChangeEventDetail as ISegmentSegmentChangeEventDetail } from '@ionic/core';
 export declare interface IonSegment extends Components.IonSegment {
   /**
    * Emitted when the value property has changed and any
@@ -1454,6 +1519,7 @@ dragging pointer has been released from `ion-segment`.
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value']
 })
 @Component({
@@ -1475,6 +1541,7 @@ export class IonSegment {
 export declare interface IonSegmentButton extends Components.IonSegmentButton {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['disabled', 'layout', 'mode', 'type', 'value']
 })
 @Component({
@@ -1491,7 +1558,7 @@ export class IonSegmentButton {
   }
 }
 
-import { SelectChangeEventDetail as ISelectSelectChangeEventDetail } from '@ionic/core';
+import type { SelectChangeEventDetail as ISelectSelectChangeEventDetail } from '@ionic/core';
 export declare interface IonSelect extends Components.IonSelect {
   /**
    * Emitted when the value has changed. 
@@ -1513,6 +1580,7 @@ export declare interface IonSelect extends Components.IonSelect {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['cancelText', 'compareWith', 'disabled', 'interface', 'interfaceOptions', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'value'],
   methods: ['open']
 })
@@ -1535,6 +1603,7 @@ export class IonSelect {
 export declare interface IonSelectOption extends Components.IonSelectOption {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['disabled', 'value']
 })
 @Component({
@@ -1555,6 +1624,7 @@ export class IonSelectOption {
 export declare interface IonSkeletonText extends Components.IonSkeletonText {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['animated']
 })
 @Component({
@@ -1574,7 +1644,9 @@ export class IonSkeletonText {
 
 export declare interface IonSlide extends Components.IonSlide {}
 
-
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
 @Component({
   selector: 'ion-slide',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1658,6 +1730,7 @@ export declare interface IonSlides extends Components.IonSlides {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['mode', 'options', 'pager', 'scrollbar'],
   methods: ['update', 'updateAutoHeight', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes', 'getSwiper']
 })
@@ -1680,6 +1753,7 @@ export class IonSlides {
 export declare interface IonSpinner extends Components.IonSpinner {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'duration', 'name', 'paused']
 })
 @Component({
@@ -1706,6 +1780,7 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['contentId', 'disabled', 'when']
 })
 @Component({
@@ -1727,6 +1802,7 @@ export class IonSplitPane {
 export declare interface IonTabBar extends Components.IonTabBar {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode', 'selectedTab', 'translucent']
 })
 @Component({
@@ -1747,6 +1823,7 @@ export class IonTabBar {
 export declare interface IonTabButton extends Components.IonTabButton {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target']
 })
 @Component({
@@ -1767,6 +1844,7 @@ export class IonTabButton {
 export declare interface IonText extends Components.IonText {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode']
 })
 @Component({
@@ -1783,7 +1861,7 @@ export class IonText {
   }
 }
 
-import { TextareaChangeEventDetail as ITextareaTextareaChangeEventDetail } from '@ionic/core';
+import type { TextareaChangeEventDetail as ITextareaTextareaChangeEventDetail } from '@ionic/core';
 export declare interface IonTextarea extends Components.IonTextarea {
   /**
    * Emitted when the input value has changed. 
@@ -1805,6 +1883,7 @@ export declare interface IonTextarea extends Components.IonTextarea {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'spellcheck', 'value', 'wrap'],
   methods: ['setFocus', 'getInputElement']
 })
@@ -1826,7 +1905,9 @@ export class IonTextarea {
 
 export declare interface IonThumbnail extends Components.IonThumbnail {}
 
-
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
 @Component({
   selector: 'ion-thumbnail',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1844,6 +1925,7 @@ export class IonThumbnail {
 export declare interface IonTitle extends Components.IonTitle {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'size']
 })
 @Component({
@@ -1860,7 +1942,7 @@ export class IonTitle {
   }
 }
 
-import { ToggleChangeEventDetail as IToggleToggleChangeEventDetail } from '@ionic/core';
+import type { ToggleChangeEventDetail as IToggleToggleChangeEventDetail } from '@ionic/core';
 export declare interface IonToggle extends Components.IonToggle {
   /**
    * Emitted when the value property has changed. 
@@ -1878,6 +1960,7 @@ export declare interface IonToggle extends Components.IonToggle {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value']
 })
 @Component({
@@ -1899,6 +1982,7 @@ export class IonToggle {
 export declare interface IonToolbar extends Components.IonToolbar {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode']
 })
 @Component({
diff --git a/core/package-lock.json b/core/package-lock.json
index 6b8cd1f9e7..1a825c91b8 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -18,10 +18,10 @@
         "@jest/core": "^26.6.3",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/angular-output-target": "^0.2.1",
-        "@stencil/react-output-target": "^0.1.0",
+        "@stencil/angular-output-target": "^0.4.0",
+        "@stencil/react-output-target": "^0.2.0",
         "@stencil/sass": "1.3.2",
-        "@stencil/vue-output-target": "^0.5.1",
+        "@stencil/vue-output-target": "^0.6.0",
         "@types/jest": "^26.0.20",
         "@types/node": "^14.6.0",
         "@types/puppeteer": "5.4.3",
@@ -1358,10 +1358,13 @@
       }
     },
     "node_modules/@stencil/angular-output-target": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.2.1.tgz",
-      "integrity": "sha512-OoLabH/PtvrYDX6VZWzcyBCXyCozWr6I+YELyz3ThuinIQx9HcbPrNjzobedluoyLxRMDc7AbQPjDi5fObNcqg==",
-      "dev": true
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.4.0.tgz",
+      "integrity": "sha512-zauaj0za46IWoPgv2IanDp3tiljwDRDNk4jB7WII6KeL66dkk7ffeqYZ0CgySTU5W2FjnKR6JEKbAnwUxjGIsA==",
+      "dev": true,
+      "peerDependencies": {
+        "@stencil/core": "^2.9.0"
+      }
     },
     "node_modules/@stencil/core": {
       "version": "2.11.0-0",
@@ -1377,12 +1380,12 @@
       }
     },
     "node_modules/@stencil/react-output-target": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.1.0.tgz",
-      "integrity": "sha512-NWeN2S43dwWDIousfojzGXIMkJJhfcdS1JxpwgE7IOqy4tZ+nqlDLPhM6tXvZ3eq4rJm8bkF+3/WbPJNR9xR7Q==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.2.0.tgz",
+      "integrity": "sha512-xVqDn7XE7os8/Ant30bwHL+PF0+0+GGtHonF9/Acvy2Z58HHk10tGFXwJcMMHxF6zCMWrlHIJ76jqEe2gxZobg==",
       "dev": true,
       "peerDependencies": {
-        "@stencil/core": ">=1.8.0"
+        "@stencil/core": "^2.9.0"
       }
     },
     "node_modules/@stencil/sass": {
@@ -1392,12 +1395,12 @@
       "dev": true
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.5.1.tgz",
-      "integrity": "sha512-E9HeuUf4DjHO8VFd+faR6T+/JwLtU/2kIA000YTTv0ARPUXuxr/3+U3YMBRPCVFPC5n2jsFxU3E9rTmVH1MGyg==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.6.0.tgz",
+      "integrity": "sha512-UxI0RTgz3AfhOePbgK3CNcX7uLVxDrdkpSCJoIyr8EjSrW5HkfraZ/ukIzuPDJDDxtYRRevY7It+qOhfn0B6aA==",
       "dev": true,
       "peerDependencies": {
-        "@stencil/core": ">=1.8.0 || ^2.0.0"
+        "@stencil/core": "^2.9.0"
       }
     },
     "node_modules/@stylelint/postcss-css-in-js": {
@@ -15037,9 +15040,9 @@
       }
     },
     "@stencil/angular-output-target": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.2.1.tgz",
-      "integrity": "sha512-OoLabH/PtvrYDX6VZWzcyBCXyCozWr6I+YELyz3ThuinIQx9HcbPrNjzobedluoyLxRMDc7AbQPjDi5fObNcqg==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.4.0.tgz",
+      "integrity": "sha512-zauaj0za46IWoPgv2IanDp3tiljwDRDNk4jB7WII6KeL66dkk7ffeqYZ0CgySTU5W2FjnKR6JEKbAnwUxjGIsA==",
       "dev": true
     },
     "@stencil/core": {
@@ -15048,9 +15051,9 @@
       "integrity": "sha512-ZJlambyk3s5Xzqd5yfzwvD7adEIHpfv89yOd210XsMhonXOLHK2k7XpFluGYUrv69HDgosu2TjFxQxhyVSS0Vg=="
     },
     "@stencil/react-output-target": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.1.0.tgz",
-      "integrity": "sha512-NWeN2S43dwWDIousfojzGXIMkJJhfcdS1JxpwgE7IOqy4tZ+nqlDLPhM6tXvZ3eq4rJm8bkF+3/WbPJNR9xR7Q==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.2.0.tgz",
+      "integrity": "sha512-xVqDn7XE7os8/Ant30bwHL+PF0+0+GGtHonF9/Acvy2Z58HHk10tGFXwJcMMHxF6zCMWrlHIJ76jqEe2gxZobg==",
       "dev": true
     },
     "@stencil/sass": {
@@ -15060,9 +15063,9 @@
       "dev": true
     },
     "@stencil/vue-output-target": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.5.1.tgz",
-      "integrity": "sha512-E9HeuUf4DjHO8VFd+faR6T+/JwLtU/2kIA000YTTv0ARPUXuxr/3+U3YMBRPCVFPC5n2jsFxU3E9rTmVH1MGyg==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.6.0.tgz",
+      "integrity": "sha512-UxI0RTgz3AfhOePbgK3CNcX7uLVxDrdkpSCJoIyr8EjSrW5HkfraZ/ukIzuPDJDDxtYRRevY7It+qOhfn0B6aA==",
       "dev": true
     },
     "@stylelint/postcss-css-in-js": {
diff --git a/core/package.json b/core/package.json
index 48f8f841d5..f530c5277b 100644
--- a/core/package.json
+++ b/core/package.json
@@ -40,10 +40,10 @@
     "@jest/core": "^26.6.3",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^0.2.1",
-    "@stencil/react-output-target": "^0.1.0",
+    "@stencil/angular-output-target": "^0.4.0",
+    "@stencil/react-output-target": "^0.2.0",
     "@stencil/sass": "1.3.2",
-    "@stencil/vue-output-target": "^0.5.1",
+    "@stencil/vue-output-target": "^0.6.0",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.6.0",
     "@types/puppeteer": "5.4.3",
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index a531d29782..103a66e58e 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -157,7 +157,6 @@ export const config: Config = {
     {
       type: 'dist-custom-elements',
       dir: 'components',
-      autoDefineCustomElements: true,
       copy: [{
         src: '../scripts/custom-elements',
         dest: 'components',
diff --git a/packages/react/src/components/inner-proxies.ts b/packages/react/src/components/inner-proxies.ts
index 4d6753a74a..d623032871 100644
--- a/packages/react/src/components/inner-proxies.ts
+++ b/packages/react/src/components/inner-proxies.ts
@@ -1,43 +1,43 @@
 import { JSX } from '@ionic/core/components';
-import { IonApp as IonAppCmp } from '@ionic/core/components/ion-app.js';
-import { IonBackButton as IonBackButtonCmp } from '@ionic/core/components/ion-back-button.js';
-import { IonRouterOutlet as IonRouterOutletCmp } from '@ionic/core/components/ion-router-outlet.js';
-import { IonTabBar as IonTabBarCmp } from '@ionic/core/components/ion-tab-bar.js';
-import { IonTabButton as IonTabButtonCmp } from '@ionic/core/components/ion-tab-button.js';
+import { defineCustomElement as defineIonApp } from '@ionic/core/components/ion-app.js';
+import { defineCustomElement as defineIonBackButton } from '@ionic/core/components/ion-back-button.js';
+import { defineCustomElement as defineIonRouterOutlet } from '@ionic/core/components/ion-router-outlet.js';
+import { defineCustomElement as defineIonTabBar } from '@ionic/core/components/ion-tab-bar.js';
+import { defineCustomElement as defineIonTabButton } from '@ionic/core/components/ion-tab-button.js';
 import { JSX as IoniconsJSX } from 'ionicons';
-import { IonIcon as IonIconCmp } from 'ionicons/components/ion-icon.js';
+import { defineCustomElement as defineIonIcon } from 'ionicons/components/ion-icon.js';
 
 import { /*@__PURE__*/ createReactComponent } from './react-component-lib';
 
 export const IonTabButtonInner = /*@__PURE__*/ createReactComponent<
   JSX.IonTabButton & { onIonTabButtonClick?: (e: CustomEvent) => void },
   HTMLIonTabButtonElement
->('ion-tab-button', undefined, undefined, IonTabButtonCmp);
+>('ion-tab-button', undefined, undefined, defineIonTabButton);
 export const IonTabBarInner = /*@__PURE__*/ createReactComponent<
   JSX.IonTabBar,
   HTMLIonTabBarElement
->('ion-tab-bar', undefined, undefined, IonTabBarCmp);
+>('ion-tab-bar', undefined, undefined, defineIonTabBar);
 export const IonBackButtonInner = /*@__PURE__*/ createReactComponent<
   Omit<JSX.IonBackButton, 'icon'>,
   HTMLIonBackButtonElement
->('ion-back-button', undefined, undefined, IonBackButtonCmp);
+>('ion-back-button', undefined, undefined, defineIonBackButton);
 export const IonRouterOutletInner = /*@__PURE__*/ createReactComponent<
   JSX.IonRouterOutlet & {
     setRef?: (val: HTMLIonRouterOutletElement) => void;
     forwardedRef?: React.ForwardedRef<HTMLIonRouterOutletElement>;
   },
   HTMLIonRouterOutletElement
->('ion-router-outlet', undefined, undefined, IonRouterOutletCmp);
+>('ion-router-outlet', undefined, undefined, defineIonRouterOutlet);
 
 export const IonAppInner = /*@__PURE__*/ createReactComponent<JSX.IonApp, HTMLIonAppElement>(
   'ion-app',
   undefined,
   undefined,
-  IonAppCmp
+  defineIonApp
 );
 
 // ionicons
 export const IonIconInner = /*@__PURE__*/ createReactComponent<
   IoniconsJSX.IonIcon,
   HTMLIonIconElement
->('ion-icon', undefined, undefined, IonIconCmp);
+>('ion-icon', undefined, undefined, defineIonIcon);
diff --git a/packages/react/src/components/proxies.ts b/packages/react/src/components/proxies.ts
index 8756f441b2..8f204c7583 100644
--- a/packages/react/src/components/proxies.ts
+++ b/packages/react/src/components/proxies.ts
@@ -5,138 +5,138 @@ import { createReactComponent } from './react-component-lib';
 
 import type { JSX } from '@ionic/core/components';
 
-import { IonAccordion as IonAccordionCmp } from '@ionic/core/components/ion-accordion.js';
-import { IonAccordionGroup as IonAccordionGroupCmp } from '@ionic/core/components/ion-accordion-group.js';
-import { IonAvatar as IonAvatarCmp } from '@ionic/core/components/ion-avatar.js';
-import { IonBackdrop as IonBackdropCmp } from '@ionic/core/components/ion-backdrop.js';
-import { IonBadge as IonBadgeCmp } from '@ionic/core/components/ion-badge.js';
-import { IonBreadcrumb as IonBreadcrumbCmp } from '@ionic/core/components/ion-breadcrumb.js';
-import { IonBreadcrumbs as IonBreadcrumbsCmp } from '@ionic/core/components/ion-breadcrumbs.js';
-import { IonButtons as IonButtonsCmp } from '@ionic/core/components/ion-buttons.js';
-import { IonCardContent as IonCardContentCmp } from '@ionic/core/components/ion-card-content.js';
-import { IonCardHeader as IonCardHeaderCmp } from '@ionic/core/components/ion-card-header.js';
-import { IonCardSubtitle as IonCardSubtitleCmp } from '@ionic/core/components/ion-card-subtitle.js';
-import { IonCardTitle as IonCardTitleCmp } from '@ionic/core/components/ion-card-title.js';
-import { IonCheckbox as IonCheckboxCmp } from '@ionic/core/components/ion-checkbox.js';
-import { IonChip as IonChipCmp } from '@ionic/core/components/ion-chip.js';
-import { IonCol as IonColCmp } from '@ionic/core/components/ion-col.js';
-import { IonContent as IonContentCmp } from '@ionic/core/components/ion-content.js';
-import { IonDatetime as IonDatetimeCmp } from '@ionic/core/components/ion-datetime.js';
-import { IonFab as IonFabCmp } from '@ionic/core/components/ion-fab.js';
-import { IonFabList as IonFabListCmp } from '@ionic/core/components/ion-fab-list.js';
-import { IonFooter as IonFooterCmp } from '@ionic/core/components/ion-footer.js';
-import { IonGrid as IonGridCmp } from '@ionic/core/components/ion-grid.js';
-import { IonHeader as IonHeaderCmp } from '@ionic/core/components/ion-header.js';
-import { IonImg as IonImgCmp } from '@ionic/core/components/ion-img.js';
-import { IonInfiniteScroll as IonInfiniteScrollCmp } from '@ionic/core/components/ion-infinite-scroll.js';
-import { IonInfiniteScrollContent as IonInfiniteScrollContentCmp } from '@ionic/core/components/ion-infinite-scroll-content.js';
-import { IonInput as IonInputCmp } from '@ionic/core/components/ion-input.js';
-import { IonItemDivider as IonItemDividerCmp } from '@ionic/core/components/ion-item-divider.js';
-import { IonItemGroup as IonItemGroupCmp } from '@ionic/core/components/ion-item-group.js';
-import { IonItemOptions as IonItemOptionsCmp } from '@ionic/core/components/ion-item-options.js';
-import { IonItemSliding as IonItemSlidingCmp } from '@ionic/core/components/ion-item-sliding.js';
-import { IonLabel as IonLabelCmp } from '@ionic/core/components/ion-label.js';
-import { IonList as IonListCmp } from '@ionic/core/components/ion-list.js';
-import { IonListHeader as IonListHeaderCmp } from '@ionic/core/components/ion-list-header.js';
-import { IonMenu as IonMenuCmp } from '@ionic/core/components/ion-menu.js';
-import { IonMenuButton as IonMenuButtonCmp } from '@ionic/core/components/ion-menu-button.js';
-import { IonMenuToggle as IonMenuToggleCmp } from '@ionic/core/components/ion-menu-toggle.js';
-import { IonNav as IonNavCmp } from '@ionic/core/components/ion-nav.js';
-import { IonNavLink as IonNavLinkCmp } from '@ionic/core/components/ion-nav-link.js';
-import { IonNote as IonNoteCmp } from '@ionic/core/components/ion-note.js';
-import { IonProgressBar as IonProgressBarCmp } from '@ionic/core/components/ion-progress-bar.js';
-import { IonRadio as IonRadioCmp } from '@ionic/core/components/ion-radio.js';
-import { IonRadioGroup as IonRadioGroupCmp } from '@ionic/core/components/ion-radio-group.js';
-import { IonRange as IonRangeCmp } from '@ionic/core/components/ion-range.js';
-import { IonRefresher as IonRefresherCmp } from '@ionic/core/components/ion-refresher.js';
-import { IonRefresherContent as IonRefresherContentCmp } from '@ionic/core/components/ion-refresher-content.js';
-import { IonReorder as IonReorderCmp } from '@ionic/core/components/ion-reorder.js';
-import { IonReorderGroup as IonReorderGroupCmp } from '@ionic/core/components/ion-reorder-group.js';
-import { IonRippleEffect as IonRippleEffectCmp } from '@ionic/core/components/ion-ripple-effect.js';
-import { IonRow as IonRowCmp } from '@ionic/core/components/ion-row.js';
-import { IonSearchbar as IonSearchbarCmp } from '@ionic/core/components/ion-searchbar.js';
-import { IonSegment as IonSegmentCmp } from '@ionic/core/components/ion-segment.js';
-import { IonSegmentButton as IonSegmentButtonCmp } from '@ionic/core/components/ion-segment-button.js';
-import { IonSelect as IonSelectCmp } from '@ionic/core/components/ion-select.js';
-import { IonSelectOption as IonSelectOptionCmp } from '@ionic/core/components/ion-select-option.js';
-import { IonSkeletonText as IonSkeletonTextCmp } from '@ionic/core/components/ion-skeleton-text.js';
-import { IonSlide as IonSlideCmp } from '@ionic/core/components/ion-slide.js';
-import { IonSlides as IonSlidesCmp } from '@ionic/core/components/ion-slides.js';
-import { IonSpinner as IonSpinnerCmp } from '@ionic/core/components/ion-spinner.js';
-import { IonSplitPane as IonSplitPaneCmp } from '@ionic/core/components/ion-split-pane.js';
-import { IonTab as IonTabCmp } from '@ionic/core/components/ion-tab.js';
-import { IonText as IonTextCmp } from '@ionic/core/components/ion-text.js';
-import { IonTextarea as IonTextareaCmp } from '@ionic/core/components/ion-textarea.js';
-import { IonThumbnail as IonThumbnailCmp } from '@ionic/core/components/ion-thumbnail.js';
-import { IonTitle as IonTitleCmp } from '@ionic/core/components/ion-title.js';
-import { IonToggle as IonToggleCmp } from '@ionic/core/components/ion-toggle.js';
-import { IonToolbar as IonToolbarCmp } from '@ionic/core/components/ion-toolbar.js';
-import { IonVirtualScroll as IonVirtualScrollCmp } from '@ionic/core/components/ion-virtual-scroll.js';
+import { defineCustomElement as defineIonAccordion } from '@ionic/core/components/ion-accordion.js';
+import { defineCustomElement as defineIonAccordionGroup } from '@ionic/core/components/ion-accordion-group.js';
+import { defineCustomElement as defineIonAvatar } from '@ionic/core/components/ion-avatar.js';
+import { defineCustomElement as defineIonBackdrop } from '@ionic/core/components/ion-backdrop.js';
+import { defineCustomElement as defineIonBadge } from '@ionic/core/components/ion-badge.js';
+import { defineCustomElement as defineIonBreadcrumb } from '@ionic/core/components/ion-breadcrumb.js';
+import { defineCustomElement as defineIonBreadcrumbs } from '@ionic/core/components/ion-breadcrumbs.js';
+import { defineCustomElement as defineIonButtons } from '@ionic/core/components/ion-buttons.js';
+import { defineCustomElement as defineIonCardContent } from '@ionic/core/components/ion-card-content.js';
+import { defineCustomElement as defineIonCardHeader } from '@ionic/core/components/ion-card-header.js';
+import { defineCustomElement as defineIonCardSubtitle } from '@ionic/core/components/ion-card-subtitle.js';
+import { defineCustomElement as defineIonCardTitle } from '@ionic/core/components/ion-card-title.js';
+import { defineCustomElement as defineIonCheckbox } from '@ionic/core/components/ion-checkbox.js';
+import { defineCustomElement as defineIonChip } from '@ionic/core/components/ion-chip.js';
+import { defineCustomElement as defineIonCol } from '@ionic/core/components/ion-col.js';
+import { defineCustomElement as defineIonContent } from '@ionic/core/components/ion-content.js';
+import { defineCustomElement as defineIonDatetime } from '@ionic/core/components/ion-datetime.js';
+import { defineCustomElement as defineIonFab } from '@ionic/core/components/ion-fab.js';
+import { defineCustomElement as defineIonFabList } from '@ionic/core/components/ion-fab-list.js';
+import { defineCustomElement as defineIonFooter } from '@ionic/core/components/ion-footer.js';
+import { defineCustomElement as defineIonGrid } from '@ionic/core/components/ion-grid.js';
+import { defineCustomElement as defineIonHeader } from '@ionic/core/components/ion-header.js';
+import { defineCustomElement as defineIonImg } from '@ionic/core/components/ion-img.js';
+import { defineCustomElement as defineIonInfiniteScroll } from '@ionic/core/components/ion-infinite-scroll.js';
+import { defineCustomElement as defineIonInfiniteScrollContent } from '@ionic/core/components/ion-infinite-scroll-content.js';
+import { defineCustomElement as defineIonInput } from '@ionic/core/components/ion-input.js';
+import { defineCustomElement as defineIonItemDivider } from '@ionic/core/components/ion-item-divider.js';
+import { defineCustomElement as defineIonItemGroup } from '@ionic/core/components/ion-item-group.js';
+import { defineCustomElement as defineIonItemOptions } from '@ionic/core/components/ion-item-options.js';
+import { defineCustomElement as defineIonItemSliding } from '@ionic/core/components/ion-item-sliding.js';
+import { defineCustomElement as defineIonLabel } from '@ionic/core/components/ion-label.js';
+import { defineCustomElement as defineIonList } from '@ionic/core/components/ion-list.js';
+import { defineCustomElement as defineIonListHeader } from '@ionic/core/components/ion-list-header.js';
+import { defineCustomElement as defineIonMenu } from '@ionic/core/components/ion-menu.js';
+import { defineCustomElement as defineIonMenuButton } from '@ionic/core/components/ion-menu-button.js';
+import { defineCustomElement as defineIonMenuToggle } from '@ionic/core/components/ion-menu-toggle.js';
+import { defineCustomElement as defineIonNav } from '@ionic/core/components/ion-nav.js';
+import { defineCustomElement as defineIonNavLink } from '@ionic/core/components/ion-nav-link.js';
+import { defineCustomElement as defineIonNote } from '@ionic/core/components/ion-note.js';
+import { defineCustomElement as defineIonProgressBar } from '@ionic/core/components/ion-progress-bar.js';
+import { defineCustomElement as defineIonRadio } from '@ionic/core/components/ion-radio.js';
+import { defineCustomElement as defineIonRadioGroup } from '@ionic/core/components/ion-radio-group.js';
+import { defineCustomElement as defineIonRange } from '@ionic/core/components/ion-range.js';
+import { defineCustomElement as defineIonRefresher } from '@ionic/core/components/ion-refresher.js';
+import { defineCustomElement as defineIonRefresherContent } from '@ionic/core/components/ion-refresher-content.js';
+import { defineCustomElement as defineIonReorder } from '@ionic/core/components/ion-reorder.js';
+import { defineCustomElement as defineIonReorderGroup } from '@ionic/core/components/ion-reorder-group.js';
+import { defineCustomElement as defineIonRippleEffect } from '@ionic/core/components/ion-ripple-effect.js';
+import { defineCustomElement as defineIonRow } from '@ionic/core/components/ion-row.js';
+import { defineCustomElement as defineIonSearchbar } from '@ionic/core/components/ion-searchbar.js';
+import { defineCustomElement as defineIonSegment } from '@ionic/core/components/ion-segment.js';
+import { defineCustomElement as defineIonSegmentButton } from '@ionic/core/components/ion-segment-button.js';
+import { defineCustomElement as defineIonSelect } from '@ionic/core/components/ion-select.js';
+import { defineCustomElement as defineIonSelectOption } from '@ionic/core/components/ion-select-option.js';
+import { defineCustomElement as defineIonSkeletonText } from '@ionic/core/components/ion-skeleton-text.js';
+import { defineCustomElement as defineIonSlide } from '@ionic/core/components/ion-slide.js';
+import { defineCustomElement as defineIonSlides } from '@ionic/core/components/ion-slides.js';
+import { defineCustomElement as defineIonSpinner } from '@ionic/core/components/ion-spinner.js';
+import { defineCustomElement as defineIonSplitPane } from '@ionic/core/components/ion-split-pane.js';
+import { defineCustomElement as defineIonTab } from '@ionic/core/components/ion-tab.js';
+import { defineCustomElement as defineIonText } from '@ionic/core/components/ion-text.js';
+import { defineCustomElement as defineIonTextarea } from '@ionic/core/components/ion-textarea.js';
+import { defineCustomElement as defineIonThumbnail } from '@ionic/core/components/ion-thumbnail.js';
+import { defineCustomElement as defineIonTitle } from '@ionic/core/components/ion-title.js';
+import { defineCustomElement as defineIonToggle } from '@ionic/core/components/ion-toggle.js';
+import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/ion-toolbar.js';
+import { defineCustomElement as defineIonVirtualScroll } from '@ionic/core/components/ion-virtual-scroll.js';
 
-export const IonAccordion = /*@__PURE__*/createReactComponent<JSX.IonAccordion, HTMLIonAccordionElement>('ion-accordion', undefined, undefined, IonAccordionCmp);
-export const IonAccordionGroup = /*@__PURE__*/createReactComponent<JSX.IonAccordionGroup, HTMLIonAccordionGroupElement>('ion-accordion-group', undefined, undefined, IonAccordionGroupCmp);
-export const IonAvatar = /*@__PURE__*/createReactComponent<JSX.IonAvatar, HTMLIonAvatarElement>('ion-avatar', undefined, undefined, IonAvatarCmp);
-export const IonBackdrop = /*@__PURE__*/createReactComponent<JSX.IonBackdrop, HTMLIonBackdropElement>('ion-backdrop', undefined, undefined, IonBackdropCmp);
-export const IonBadge = /*@__PURE__*/createReactComponent<JSX.IonBadge, HTMLIonBadgeElement>('ion-badge', undefined, undefined, IonBadgeCmp);
-export const IonBreadcrumb = /*@__PURE__*/createReactComponent<JSX.IonBreadcrumb, HTMLIonBreadcrumbElement>('ion-breadcrumb', undefined, undefined, IonBreadcrumbCmp);
-export const IonBreadcrumbs = /*@__PURE__*/createReactComponent<JSX.IonBreadcrumbs, HTMLIonBreadcrumbsElement>('ion-breadcrumbs', undefined, undefined, IonBreadcrumbsCmp);
-export const IonButtons = /*@__PURE__*/createReactComponent<JSX.IonButtons, HTMLIonButtonsElement>('ion-buttons', undefined, undefined, IonButtonsCmp);
-export const IonCardContent = /*@__PURE__*/createReactComponent<JSX.IonCardContent, HTMLIonCardContentElement>('ion-card-content', undefined, undefined, IonCardContentCmp);
-export const IonCardHeader = /*@__PURE__*/createReactComponent<JSX.IonCardHeader, HTMLIonCardHeaderElement>('ion-card-header', undefined, undefined, IonCardHeaderCmp);
-export const IonCardSubtitle = /*@__PURE__*/createReactComponent<JSX.IonCardSubtitle, HTMLIonCardSubtitleElement>('ion-card-subtitle', undefined, undefined, IonCardSubtitleCmp);
-export const IonCardTitle = /*@__PURE__*/createReactComponent<JSX.IonCardTitle, HTMLIonCardTitleElement>('ion-card-title', undefined, undefined, IonCardTitleCmp);
-export const IonCheckbox = /*@__PURE__*/createReactComponent<JSX.IonCheckbox, HTMLIonCheckboxElement>('ion-checkbox', undefined, undefined, IonCheckboxCmp);
-export const IonChip = /*@__PURE__*/createReactComponent<JSX.IonChip, HTMLIonChipElement>('ion-chip', undefined, undefined, IonChipCmp);
-export const IonCol = /*@__PURE__*/createReactComponent<JSX.IonCol, HTMLIonColElement>('ion-col', undefined, undefined, IonColCmp);
-export const IonContent = /*@__PURE__*/createReactComponent<JSX.IonContent, HTMLIonContentElement>('ion-content', undefined, undefined, IonContentCmp);
-export const IonDatetime = /*@__PURE__*/createReactComponent<JSX.IonDatetime, HTMLIonDatetimeElement>('ion-datetime', undefined, undefined, IonDatetimeCmp);
-export const IonFab = /*@__PURE__*/createReactComponent<JSX.IonFab, HTMLIonFabElement>('ion-fab', undefined, undefined, IonFabCmp);
-export const IonFabList = /*@__PURE__*/createReactComponent<JSX.IonFabList, HTMLIonFabListElement>('ion-fab-list', undefined, undefined, IonFabListCmp);
-export const IonFooter = /*@__PURE__*/createReactComponent<JSX.IonFooter, HTMLIonFooterElement>('ion-footer', undefined, undefined, IonFooterCmp);
-export const IonGrid = /*@__PURE__*/createReactComponent<JSX.IonGrid, HTMLIonGridElement>('ion-grid', undefined, undefined, IonGridCmp);
-export const IonHeader = /*@__PURE__*/createReactComponent<JSX.IonHeader, HTMLIonHeaderElement>('ion-header', undefined, undefined, IonHeaderCmp);
-export const IonImg = /*@__PURE__*/createReactComponent<JSX.IonImg, HTMLIonImgElement>('ion-img', undefined, undefined, IonImgCmp);
-export const IonInfiniteScroll = /*@__PURE__*/createReactComponent<JSX.IonInfiniteScroll, HTMLIonInfiniteScrollElement>('ion-infinite-scroll', undefined, undefined, IonInfiniteScrollCmp);
-export const IonInfiniteScrollContent = /*@__PURE__*/createReactComponent<JSX.IonInfiniteScrollContent, HTMLIonInfiniteScrollContentElement>('ion-infinite-scroll-content', undefined, undefined, IonInfiniteScrollContentCmp);
-export const IonInput = /*@__PURE__*/createReactComponent<JSX.IonInput, HTMLIonInputElement>('ion-input', undefined, undefined, IonInputCmp);
-export const IonItemDivider = /*@__PURE__*/createReactComponent<JSX.IonItemDivider, HTMLIonItemDividerElement>('ion-item-divider', undefined, undefined, IonItemDividerCmp);
-export const IonItemGroup = /*@__PURE__*/createReactComponent<JSX.IonItemGroup, HTMLIonItemGroupElement>('ion-item-group', undefined, undefined, IonItemGroupCmp);
-export const IonItemOptions = /*@__PURE__*/createReactComponent<JSX.IonItemOptions, HTMLIonItemOptionsElement>('ion-item-options', undefined, undefined, IonItemOptionsCmp);
-export const IonItemSliding = /*@__PURE__*/createReactComponent<JSX.IonItemSliding, HTMLIonItemSlidingElement>('ion-item-sliding', undefined, undefined, IonItemSlidingCmp);
-export const IonLabel = /*@__PURE__*/createReactComponent<JSX.IonLabel, HTMLIonLabelElement>('ion-label', undefined, undefined, IonLabelCmp);
-export const IonList = /*@__PURE__*/createReactComponent<JSX.IonList, HTMLIonListElement>('ion-list', undefined, undefined, IonListCmp);
-export const IonListHeader = /*@__PURE__*/createReactComponent<JSX.IonListHeader, HTMLIonListHeaderElement>('ion-list-header', undefined, undefined, IonListHeaderCmp);
-export const IonMenu = /*@__PURE__*/createReactComponent<JSX.IonMenu, HTMLIonMenuElement>('ion-menu', undefined, undefined, IonMenuCmp);
-export const IonMenuButton = /*@__PURE__*/createReactComponent<JSX.IonMenuButton, HTMLIonMenuButtonElement>('ion-menu-button', undefined, undefined, IonMenuButtonCmp);
-export const IonMenuToggle = /*@__PURE__*/createReactComponent<JSX.IonMenuToggle, HTMLIonMenuToggleElement>('ion-menu-toggle', undefined, undefined, IonMenuToggleCmp);
-export const IonNav = /*@__PURE__*/createReactComponent<JSX.IonNav, HTMLIonNavElement>('ion-nav', undefined, undefined, IonNavCmp);
-export const IonNavLink = /*@__PURE__*/createReactComponent<JSX.IonNavLink, HTMLIonNavLinkElement>('ion-nav-link', undefined, undefined, IonNavLinkCmp);
-export const IonNote = /*@__PURE__*/createReactComponent<JSX.IonNote, HTMLIonNoteElement>('ion-note', undefined, undefined, IonNoteCmp);
-export const IonProgressBar = /*@__PURE__*/createReactComponent<JSX.IonProgressBar, HTMLIonProgressBarElement>('ion-progress-bar', undefined, undefined, IonProgressBarCmp);
-export const IonRadio = /*@__PURE__*/createReactComponent<JSX.IonRadio, HTMLIonRadioElement>('ion-radio', undefined, undefined, IonRadioCmp);
-export const IonRadioGroup = /*@__PURE__*/createReactComponent<JSX.IonRadioGroup, HTMLIonRadioGroupElement>('ion-radio-group', undefined, undefined, IonRadioGroupCmp);
-export const IonRange = /*@__PURE__*/createReactComponent<JSX.IonRange, HTMLIonRangeElement>('ion-range', undefined, undefined, IonRangeCmp);
-export const IonRefresher = /*@__PURE__*/createReactComponent<JSX.IonRefresher, HTMLIonRefresherElement>('ion-refresher', undefined, undefined, IonRefresherCmp);
-export const IonRefresherContent = /*@__PURE__*/createReactComponent<JSX.IonRefresherContent, HTMLIonRefresherContentElement>('ion-refresher-content', undefined, undefined, IonRefresherContentCmp);
-export const IonReorder = /*@__PURE__*/createReactComponent<JSX.IonReorder, HTMLIonReorderElement>('ion-reorder', undefined, undefined, IonReorderCmp);
-export const IonReorderGroup = /*@__PURE__*/createReactComponent<JSX.IonReorderGroup, HTMLIonReorderGroupElement>('ion-reorder-group', undefined, undefined, IonReorderGroupCmp);
-export const IonRippleEffect = /*@__PURE__*/createReactComponent<JSX.IonRippleEffect, HTMLIonRippleEffectElement>('ion-ripple-effect', undefined, undefined, IonRippleEffectCmp);
-export const IonRow = /*@__PURE__*/createReactComponent<JSX.IonRow, HTMLIonRowElement>('ion-row', undefined, undefined, IonRowCmp);
-export const IonSearchbar = /*@__PURE__*/createReactComponent<JSX.IonSearchbar, HTMLIonSearchbarElement>('ion-searchbar', undefined, undefined, IonSearchbarCmp);
-export const IonSegment = /*@__PURE__*/createReactComponent<JSX.IonSegment, HTMLIonSegmentElement>('ion-segment', undefined, undefined, IonSegmentCmp);
-export const IonSegmentButton = /*@__PURE__*/createReactComponent<JSX.IonSegmentButton, HTMLIonSegmentButtonElement>('ion-segment-button', undefined, undefined, IonSegmentButtonCmp);
-export const IonSelect = /*@__PURE__*/createReactComponent<JSX.IonSelect, HTMLIonSelectElement>('ion-select', undefined, undefined, IonSelectCmp);
-export const IonSelectOption = /*@__PURE__*/createReactComponent<JSX.IonSelectOption, HTMLIonSelectOptionElement>('ion-select-option', undefined, undefined, IonSelectOptionCmp);
-export const IonSkeletonText = /*@__PURE__*/createReactComponent<JSX.IonSkeletonText, HTMLIonSkeletonTextElement>('ion-skeleton-text', undefined, undefined, IonSkeletonTextCmp);
-export const IonSlide = /*@__PURE__*/createReactComponent<JSX.IonSlide, HTMLIonSlideElement>('ion-slide', undefined, undefined, IonSlideCmp);
-export const IonSlides = /*@__PURE__*/createReactComponent<JSX.IonSlides, HTMLIonSlidesElement>('ion-slides', undefined, undefined, IonSlidesCmp);
-export const IonSpinner = /*@__PURE__*/createReactComponent<JSX.IonSpinner, HTMLIonSpinnerElement>('ion-spinner', undefined, undefined, IonSpinnerCmp);
-export const IonSplitPane = /*@__PURE__*/createReactComponent<JSX.IonSplitPane, HTMLIonSplitPaneElement>('ion-split-pane', undefined, undefined, IonSplitPaneCmp);
-export const IonTab = /*@__PURE__*/createReactComponent<JSX.IonTab, HTMLIonTabElement>('ion-tab', undefined, undefined, IonTabCmp);
-export const IonText = /*@__PURE__*/createReactComponent<JSX.IonText, HTMLIonTextElement>('ion-text', undefined, undefined, IonTextCmp);
-export const IonTextarea = /*@__PURE__*/createReactComponent<JSX.IonTextarea, HTMLIonTextareaElement>('ion-textarea', undefined, undefined, IonTextareaCmp);
-export const IonThumbnail = /*@__PURE__*/createReactComponent<JSX.IonThumbnail, HTMLIonThumbnailElement>('ion-thumbnail', undefined, undefined, IonThumbnailCmp);
-export const IonTitle = /*@__PURE__*/createReactComponent<JSX.IonTitle, HTMLIonTitleElement>('ion-title', undefined, undefined, IonTitleCmp);
-export const IonToggle = /*@__PURE__*/createReactComponent<JSX.IonToggle, HTMLIonToggleElement>('ion-toggle', undefined, undefined, IonToggleCmp);
-export const IonToolbar = /*@__PURE__*/createReactComponent<JSX.IonToolbar, HTMLIonToolbarElement>('ion-toolbar', undefined, undefined, IonToolbarCmp);
-export const IonVirtualScroll = /*@__PURE__*/createReactComponent<JSX.IonVirtualScroll, HTMLIonVirtualScrollElement>('ion-virtual-scroll', undefined, undefined, IonVirtualScrollCmp);
+export const IonAccordion = /*@__PURE__*/createReactComponent<JSX.IonAccordion, HTMLIonAccordionElement>('ion-accordion', undefined, undefined, defineIonAccordion);
+export const IonAccordionGroup = /*@__PURE__*/createReactComponent<JSX.IonAccordionGroup, HTMLIonAccordionGroupElement>('ion-accordion-group', undefined, undefined, defineIonAccordionGroup);
+export const IonAvatar = /*@__PURE__*/createReactComponent<JSX.IonAvatar, HTMLIonAvatarElement>('ion-avatar', undefined, undefined, defineIonAvatar);
+export const IonBackdrop = /*@__PURE__*/createReactComponent<JSX.IonBackdrop, HTMLIonBackdropElement>('ion-backdrop', undefined, undefined, defineIonBackdrop);
+export const IonBadge = /*@__PURE__*/createReactComponent<JSX.IonBadge, HTMLIonBadgeElement>('ion-badge', undefined, undefined, defineIonBadge);
+export const IonBreadcrumb = /*@__PURE__*/createReactComponent<JSX.IonBreadcrumb, HTMLIonBreadcrumbElement>('ion-breadcrumb', undefined, undefined, defineIonBreadcrumb);
+export const IonBreadcrumbs = /*@__PURE__*/createReactComponent<JSX.IonBreadcrumbs, HTMLIonBreadcrumbsElement>('ion-breadcrumbs', undefined, undefined, defineIonBreadcrumbs);
+export const IonButtons = /*@__PURE__*/createReactComponent<JSX.IonButtons, HTMLIonButtonsElement>('ion-buttons', undefined, undefined, defineIonButtons);
+export const IonCardContent = /*@__PURE__*/createReactComponent<JSX.IonCardContent, HTMLIonCardContentElement>('ion-card-content', undefined, undefined, defineIonCardContent);
+export const IonCardHeader = /*@__PURE__*/createReactComponent<JSX.IonCardHeader, HTMLIonCardHeaderElement>('ion-card-header', undefined, undefined, defineIonCardHeader);
+export const IonCardSubtitle = /*@__PURE__*/createReactComponent<JSX.IonCardSubtitle, HTMLIonCardSubtitleElement>('ion-card-subtitle', undefined, undefined, defineIonCardSubtitle);
+export const IonCardTitle = /*@__PURE__*/createReactComponent<JSX.IonCardTitle, HTMLIonCardTitleElement>('ion-card-title', undefined, undefined, defineIonCardTitle);
+export const IonCheckbox = /*@__PURE__*/createReactComponent<JSX.IonCheckbox, HTMLIonCheckboxElement>('ion-checkbox', undefined, undefined, defineIonCheckbox);
+export const IonChip = /*@__PURE__*/createReactComponent<JSX.IonChip, HTMLIonChipElement>('ion-chip', undefined, undefined, defineIonChip);
+export const IonCol = /*@__PURE__*/createReactComponent<JSX.IonCol, HTMLIonColElement>('ion-col', undefined, undefined, defineIonCol);
+export const IonContent = /*@__PURE__*/createReactComponent<JSX.IonContent, HTMLIonContentElement>('ion-content', undefined, undefined, defineIonContent);
+export const IonDatetime = /*@__PURE__*/createReactComponent<JSX.IonDatetime, HTMLIonDatetimeElement>('ion-datetime', undefined, undefined, defineIonDatetime);
+export const IonFab = /*@__PURE__*/createReactComponent<JSX.IonFab, HTMLIonFabElement>('ion-fab', undefined, undefined, defineIonFab);
+export const IonFabList = /*@__PURE__*/createReactComponent<JSX.IonFabList, HTMLIonFabListElement>('ion-fab-list', undefined, undefined, defineIonFabList);
+export const IonFooter = /*@__PURE__*/createReactComponent<JSX.IonFooter, HTMLIonFooterElement>('ion-footer', undefined, undefined, defineIonFooter);
+export const IonGrid = /*@__PURE__*/createReactComponent<JSX.IonGrid, HTMLIonGridElement>('ion-grid', undefined, undefined, defineIonGrid);
+export const IonHeader = /*@__PURE__*/createReactComponent<JSX.IonHeader, HTMLIonHeaderElement>('ion-header', undefined, undefined, defineIonHeader);
+export const IonImg = /*@__PURE__*/createReactComponent<JSX.IonImg, HTMLIonImgElement>('ion-img', undefined, undefined, defineIonImg);
+export const IonInfiniteScroll = /*@__PURE__*/createReactComponent<JSX.IonInfiniteScroll, HTMLIonInfiniteScrollElement>('ion-infinite-scroll', undefined, undefined, defineIonInfiniteScroll);
+export const IonInfiniteScrollContent = /*@__PURE__*/createReactComponent<JSX.IonInfiniteScrollContent, HTMLIonInfiniteScrollContentElement>('ion-infinite-scroll-content', undefined, undefined, defineIonInfiniteScrollContent);
+export const IonInput = /*@__PURE__*/createReactComponent<JSX.IonInput, HTMLIonInputElement>('ion-input', undefined, undefined, defineIonInput);
+export const IonItemDivider = /*@__PURE__*/createReactComponent<JSX.IonItemDivider, HTMLIonItemDividerElement>('ion-item-divider', undefined, undefined, defineIonItemDivider);
+export const IonItemGroup = /*@__PURE__*/createReactComponent<JSX.IonItemGroup, HTMLIonItemGroupElement>('ion-item-group', undefined, undefined, defineIonItemGroup);
+export const IonItemOptions = /*@__PURE__*/createReactComponent<JSX.IonItemOptions, HTMLIonItemOptionsElement>('ion-item-options', undefined, undefined, defineIonItemOptions);
+export const IonItemSliding = /*@__PURE__*/createReactComponent<JSX.IonItemSliding, HTMLIonItemSlidingElement>('ion-item-sliding', undefined, undefined, defineIonItemSliding);
+export const IonLabel = /*@__PURE__*/createReactComponent<JSX.IonLabel, HTMLIonLabelElement>('ion-label', undefined, undefined, defineIonLabel);
+export const IonList = /*@__PURE__*/createReactComponent<JSX.IonList, HTMLIonListElement>('ion-list', undefined, undefined, defineIonList);
+export const IonListHeader = /*@__PURE__*/createReactComponent<JSX.IonListHeader, HTMLIonListHeaderElement>('ion-list-header', undefined, undefined, defineIonListHeader);
+export const IonMenu = /*@__PURE__*/createReactComponent<JSX.IonMenu, HTMLIonMenuElement>('ion-menu', undefined, undefined, defineIonMenu);
+export const IonMenuButton = /*@__PURE__*/createReactComponent<JSX.IonMenuButton, HTMLIonMenuButtonElement>('ion-menu-button', undefined, undefined, defineIonMenuButton);
+export const IonMenuToggle = /*@__PURE__*/createReactComponent<JSX.IonMenuToggle, HTMLIonMenuToggleElement>('ion-menu-toggle', undefined, undefined, defineIonMenuToggle);
+export const IonNav = /*@__PURE__*/createReactComponent<JSX.IonNav, HTMLIonNavElement>('ion-nav', undefined, undefined, defineIonNav);
+export const IonNavLink = /*@__PURE__*/createReactComponent<JSX.IonNavLink, HTMLIonNavLinkElement>('ion-nav-link', undefined, undefined, defineIonNavLink);
+export const IonNote = /*@__PURE__*/createReactComponent<JSX.IonNote, HTMLIonNoteElement>('ion-note', undefined, undefined, defineIonNote);
+export const IonProgressBar = /*@__PURE__*/createReactComponent<JSX.IonProgressBar, HTMLIonProgressBarElement>('ion-progress-bar', undefined, undefined, defineIonProgressBar);
+export const IonRadio = /*@__PURE__*/createReactComponent<JSX.IonRadio, HTMLIonRadioElement>('ion-radio', undefined, undefined, defineIonRadio);
+export const IonRadioGroup = /*@__PURE__*/createReactComponent<JSX.IonRadioGroup, HTMLIonRadioGroupElement>('ion-radio-group', undefined, undefined, defineIonRadioGroup);
+export const IonRange = /*@__PURE__*/createReactComponent<JSX.IonRange, HTMLIonRangeElement>('ion-range', undefined, undefined, defineIonRange);
+export const IonRefresher = /*@__PURE__*/createReactComponent<JSX.IonRefresher, HTMLIonRefresherElement>('ion-refresher', undefined, undefined, defineIonRefresher);
+export const IonRefresherContent = /*@__PURE__*/createReactComponent<JSX.IonRefresherContent, HTMLIonRefresherContentElement>('ion-refresher-content', undefined, undefined, defineIonRefresherContent);
+export const IonReorder = /*@__PURE__*/createReactComponent<JSX.IonReorder, HTMLIonReorderElement>('ion-reorder', undefined, undefined, defineIonReorder);
+export const IonReorderGroup = /*@__PURE__*/createReactComponent<JSX.IonReorderGroup, HTMLIonReorderGroupElement>('ion-reorder-group', undefined, undefined, defineIonReorderGroup);
+export const IonRippleEffect = /*@__PURE__*/createReactComponent<JSX.IonRippleEffect, HTMLIonRippleEffectElement>('ion-ripple-effect', undefined, undefined, defineIonRippleEffect);
+export const IonRow = /*@__PURE__*/createReactComponent<JSX.IonRow, HTMLIonRowElement>('ion-row', undefined, undefined, defineIonRow);
+export const IonSearchbar = /*@__PURE__*/createReactComponent<JSX.IonSearchbar, HTMLIonSearchbarElement>('ion-searchbar', undefined, undefined, defineIonSearchbar);
+export const IonSegment = /*@__PURE__*/createReactComponent<JSX.IonSegment, HTMLIonSegmentElement>('ion-segment', undefined, undefined, defineIonSegment);
+export const IonSegmentButton = /*@__PURE__*/createReactComponent<JSX.IonSegmentButton, HTMLIonSegmentButtonElement>('ion-segment-button', undefined, undefined, defineIonSegmentButton);
+export const IonSelect = /*@__PURE__*/createReactComponent<JSX.IonSelect, HTMLIonSelectElement>('ion-select', undefined, undefined, defineIonSelect);
+export const IonSelectOption = /*@__PURE__*/createReactComponent<JSX.IonSelectOption, HTMLIonSelectOptionElement>('ion-select-option', undefined, undefined, defineIonSelectOption);
+export const IonSkeletonText = /*@__PURE__*/createReactComponent<JSX.IonSkeletonText, HTMLIonSkeletonTextElement>('ion-skeleton-text', undefined, undefined, defineIonSkeletonText);
+export const IonSlide = /*@__PURE__*/createReactComponent<JSX.IonSlide, HTMLIonSlideElement>('ion-slide', undefined, undefined, defineIonSlide);
+export const IonSlides = /*@__PURE__*/createReactComponent<JSX.IonSlides, HTMLIonSlidesElement>('ion-slides', undefined, undefined, defineIonSlides);
+export const IonSpinner = /*@__PURE__*/createReactComponent<JSX.IonSpinner, HTMLIonSpinnerElement>('ion-spinner', undefined, undefined, defineIonSpinner);
+export const IonSplitPane = /*@__PURE__*/createReactComponent<JSX.IonSplitPane, HTMLIonSplitPaneElement>('ion-split-pane', undefined, undefined, defineIonSplitPane);
+export const IonTab = /*@__PURE__*/createReactComponent<JSX.IonTab, HTMLIonTabElement>('ion-tab', undefined, undefined, defineIonTab);
+export const IonText = /*@__PURE__*/createReactComponent<JSX.IonText, HTMLIonTextElement>('ion-text', undefined, undefined, defineIonText);
+export const IonTextarea = /*@__PURE__*/createReactComponent<JSX.IonTextarea, HTMLIonTextareaElement>('ion-textarea', undefined, undefined, defineIonTextarea);
+export const IonThumbnail = /*@__PURE__*/createReactComponent<JSX.IonThumbnail, HTMLIonThumbnailElement>('ion-thumbnail', undefined, undefined, defineIonThumbnail);
+export const IonTitle = /*@__PURE__*/createReactComponent<JSX.IonTitle, HTMLIonTitleElement>('ion-title', undefined, undefined, defineIonTitle);
+export const IonToggle = /*@__PURE__*/createReactComponent<JSX.IonToggle, HTMLIonToggleElement>('ion-toggle', undefined, undefined, defineIonToggle);
+export const IonToolbar = /*@__PURE__*/createReactComponent<JSX.IonToolbar, HTMLIonToolbarElement>('ion-toolbar', undefined, undefined, defineIonToolbar);
+export const IonVirtualScroll = /*@__PURE__*/createReactComponent<JSX.IonVirtualScroll, HTMLIonVirtualScrollElement>('ion-virtual-scroll', undefined, undefined, defineIonVirtualScroll);
diff --git a/packages/react/src/components/react-component-lib/createComponent.tsx b/packages/react/src/components/react-component-lib/createComponent.tsx
index c3be0b1d32..d179160f79 100644
--- a/packages/react/src/components/react-component-lib/createComponent.tsx
+++ b/packages/react/src/components/react-component-lib/createComponent.tsx
@@ -4,7 +4,6 @@ import {
   attachProps,
   createForwardRef,
   dashToPascalCase,
-  defineCustomElement,
   isCoveredByReact,
   mergeRefs,
 } from './utils';
@@ -30,9 +29,11 @@ export const createReactComponent = <
     originalProps: StencilReactInternalProps<ElementType>,
     propsToPass: any,
   ) => ExpandedPropsTypes,
-  customElement?: any,
+  defineCustomElement?: () => void,
 ) => {
-  defineCustomElement(tagName, customElement);
+  if (defineCustomElement !== undefined) {
+    defineCustomElement();
+  }
 
   const displayName = dashToPascalCase(tagName);
   const ReactComponent = class extends React.Component<StencilReactInternalProps<ElementType>> {
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index aca29373e9..f265a759a9 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -5,80 +5,80 @@ import { defineContainer } from './vue-component-lib/utils';
 
 import type { JSX } from '@ionic/core/components';
 
-import { IonAccordion as IonAccordionCmp } from '@ionic/core/components/ion-accordion.js';
-import { IonAccordionGroup as IonAccordionGroupCmp } from '@ionic/core/components/ion-accordion-group.js';
-import { IonAvatar as IonAvatarCmp } from '@ionic/core/components/ion-avatar.js';
-import { IonBackdrop as IonBackdropCmp } from '@ionic/core/components/ion-backdrop.js';
-import { IonBadge as IonBadgeCmp } from '@ionic/core/components/ion-badge.js';
-import { IonBreadcrumb as IonBreadcrumbCmp } from '@ionic/core/components/ion-breadcrumb.js';
-import { IonBreadcrumbs as IonBreadcrumbsCmp } from '@ionic/core/components/ion-breadcrumbs.js';
-import { IonButton as IonButtonCmp } from '@ionic/core/components/ion-button.js';
-import { IonButtons as IonButtonsCmp } from '@ionic/core/components/ion-buttons.js';
-import { IonCard as IonCardCmp } from '@ionic/core/components/ion-card.js';
-import { IonCardContent as IonCardContentCmp } from '@ionic/core/components/ion-card-content.js';
-import { IonCardHeader as IonCardHeaderCmp } from '@ionic/core/components/ion-card-header.js';
-import { IonCardSubtitle as IonCardSubtitleCmp } from '@ionic/core/components/ion-card-subtitle.js';
-import { IonCardTitle as IonCardTitleCmp } from '@ionic/core/components/ion-card-title.js';
-import { IonCheckbox as IonCheckboxCmp } from '@ionic/core/components/ion-checkbox.js';
-import { IonChip as IonChipCmp } from '@ionic/core/components/ion-chip.js';
-import { IonCol as IonColCmp } from '@ionic/core/components/ion-col.js';
-import { IonContent as IonContentCmp } from '@ionic/core/components/ion-content.js';
-import { IonDatetime as IonDatetimeCmp } from '@ionic/core/components/ion-datetime.js';
-import { IonFab as IonFabCmp } from '@ionic/core/components/ion-fab.js';
-import { IonFabButton as IonFabButtonCmp } from '@ionic/core/components/ion-fab-button.js';
-import { IonFabList as IonFabListCmp } from '@ionic/core/components/ion-fab-list.js';
-import { IonFooter as IonFooterCmp } from '@ionic/core/components/ion-footer.js';
-import { IonGrid as IonGridCmp } from '@ionic/core/components/ion-grid.js';
-import { IonHeader as IonHeaderCmp } from '@ionic/core/components/ion-header.js';
-import { IonImg as IonImgCmp } from '@ionic/core/components/ion-img.js';
-import { IonInfiniteScroll as IonInfiniteScrollCmp } from '@ionic/core/components/ion-infinite-scroll.js';
-import { IonInfiniteScrollContent as IonInfiniteScrollContentCmp } from '@ionic/core/components/ion-infinite-scroll-content.js';
-import { IonInput as IonInputCmp } from '@ionic/core/components/ion-input.js';
-import { IonItem as IonItemCmp } from '@ionic/core/components/ion-item.js';
-import { IonItemDivider as IonItemDividerCmp } from '@ionic/core/components/ion-item-divider.js';
-import { IonItemGroup as IonItemGroupCmp } from '@ionic/core/components/ion-item-group.js';
-import { IonItemOption as IonItemOptionCmp } from '@ionic/core/components/ion-item-option.js';
-import { IonItemOptions as IonItemOptionsCmp } from '@ionic/core/components/ion-item-options.js';
-import { IonItemSliding as IonItemSlidingCmp } from '@ionic/core/components/ion-item-sliding.js';
-import { IonLabel as IonLabelCmp } from '@ionic/core/components/ion-label.js';
-import { IonList as IonListCmp } from '@ionic/core/components/ion-list.js';
-import { IonListHeader as IonListHeaderCmp } from '@ionic/core/components/ion-list-header.js';
-import { IonMenu as IonMenuCmp } from '@ionic/core/components/ion-menu.js';
-import { IonMenuButton as IonMenuButtonCmp } from '@ionic/core/components/ion-menu-button.js';
-import { IonMenuToggle as IonMenuToggleCmp } from '@ionic/core/components/ion-menu-toggle.js';
-import { IonNav as IonNavCmp } from '@ionic/core/components/ion-nav.js';
-import { IonNavLink as IonNavLinkCmp } from '@ionic/core/components/ion-nav-link.js';
-import { IonNote as IonNoteCmp } from '@ionic/core/components/ion-note.js';
-import { IonProgressBar as IonProgressBarCmp } from '@ionic/core/components/ion-progress-bar.js';
-import { IonRadio as IonRadioCmp } from '@ionic/core/components/ion-radio.js';
-import { IonRadioGroup as IonRadioGroupCmp } from '@ionic/core/components/ion-radio-group.js';
-import { IonRange as IonRangeCmp } from '@ionic/core/components/ion-range.js';
-import { IonRefresher as IonRefresherCmp } from '@ionic/core/components/ion-refresher.js';
-import { IonRefresherContent as IonRefresherContentCmp } from '@ionic/core/components/ion-refresher-content.js';
-import { IonReorder as IonReorderCmp } from '@ionic/core/components/ion-reorder.js';
-import { IonReorderGroup as IonReorderGroupCmp } from '@ionic/core/components/ion-reorder-group.js';
-import { IonRippleEffect as IonRippleEffectCmp } from '@ionic/core/components/ion-ripple-effect.js';
-import { IonRow as IonRowCmp } from '@ionic/core/components/ion-row.js';
-import { IonSearchbar as IonSearchbarCmp } from '@ionic/core/components/ion-searchbar.js';
-import { IonSegment as IonSegmentCmp } from '@ionic/core/components/ion-segment.js';
-import { IonSegmentButton as IonSegmentButtonCmp } from '@ionic/core/components/ion-segment-button.js';
-import { IonSelect as IonSelectCmp } from '@ionic/core/components/ion-select.js';
-import { IonSelectOption as IonSelectOptionCmp } from '@ionic/core/components/ion-select-option.js';
-import { IonSkeletonText as IonSkeletonTextCmp } from '@ionic/core/components/ion-skeleton-text.js';
-import { IonSlide as IonSlideCmp } from '@ionic/core/components/ion-slide.js';
-import { IonSlides as IonSlidesCmp } from '@ionic/core/components/ion-slides.js';
-import { IonSpinner as IonSpinnerCmp } from '@ionic/core/components/ion-spinner.js';
-import { IonSplitPane as IonSplitPaneCmp } from '@ionic/core/components/ion-split-pane.js';
-import { IonText as IonTextCmp } from '@ionic/core/components/ion-text.js';
-import { IonTextarea as IonTextareaCmp } from '@ionic/core/components/ion-textarea.js';
-import { IonThumbnail as IonThumbnailCmp } from '@ionic/core/components/ion-thumbnail.js';
-import { IonTitle as IonTitleCmp } from '@ionic/core/components/ion-title.js';
-import { IonToggle as IonToggleCmp } from '@ionic/core/components/ion-toggle.js';
-import { IonToolbar as IonToolbarCmp } from '@ionic/core/components/ion-toolbar.js';
-import { IonVirtualScroll as IonVirtualScrollCmp } from '@ionic/core/components/ion-virtual-scroll.js';
+import { defineCustomElement as defineIonAccordion } from '@ionic/core/components/ion-accordion.js';
+import { defineCustomElement as defineIonAccordionGroup } from '@ionic/core/components/ion-accordion-group.js';
+import { defineCustomElement as defineIonAvatar } from '@ionic/core/components/ion-avatar.js';
+import { defineCustomElement as defineIonBackdrop } from '@ionic/core/components/ion-backdrop.js';
+import { defineCustomElement as defineIonBadge } from '@ionic/core/components/ion-badge.js';
+import { defineCustomElement as defineIonBreadcrumb } from '@ionic/core/components/ion-breadcrumb.js';
+import { defineCustomElement as defineIonBreadcrumbs } from '@ionic/core/components/ion-breadcrumbs.js';
+import { defineCustomElement as defineIonButton } from '@ionic/core/components/ion-button.js';
+import { defineCustomElement as defineIonButtons } from '@ionic/core/components/ion-buttons.js';
+import { defineCustomElement as defineIonCard } from '@ionic/core/components/ion-card.js';
+import { defineCustomElement as defineIonCardContent } from '@ionic/core/components/ion-card-content.js';
+import { defineCustomElement as defineIonCardHeader } from '@ionic/core/components/ion-card-header.js';
+import { defineCustomElement as defineIonCardSubtitle } from '@ionic/core/components/ion-card-subtitle.js';
+import { defineCustomElement as defineIonCardTitle } from '@ionic/core/components/ion-card-title.js';
+import { defineCustomElement as defineIonCheckbox } from '@ionic/core/components/ion-checkbox.js';
+import { defineCustomElement as defineIonChip } from '@ionic/core/components/ion-chip.js';
+import { defineCustomElement as defineIonCol } from '@ionic/core/components/ion-col.js';
+import { defineCustomElement as defineIonContent } from '@ionic/core/components/ion-content.js';
+import { defineCustomElement as defineIonDatetime } from '@ionic/core/components/ion-datetime.js';
+import { defineCustomElement as defineIonFab } from '@ionic/core/components/ion-fab.js';
+import { defineCustomElement as defineIonFabButton } from '@ionic/core/components/ion-fab-button.js';
+import { defineCustomElement as defineIonFabList } from '@ionic/core/components/ion-fab-list.js';
+import { defineCustomElement as defineIonFooter } from '@ionic/core/components/ion-footer.js';
+import { defineCustomElement as defineIonGrid } from '@ionic/core/components/ion-grid.js';
+import { defineCustomElement as defineIonHeader } from '@ionic/core/components/ion-header.js';
+import { defineCustomElement as defineIonImg } from '@ionic/core/components/ion-img.js';
+import { defineCustomElement as defineIonInfiniteScroll } from '@ionic/core/components/ion-infinite-scroll.js';
+import { defineCustomElement as defineIonInfiniteScrollContent } from '@ionic/core/components/ion-infinite-scroll-content.js';
+import { defineCustomElement as defineIonInput } from '@ionic/core/components/ion-input.js';
+import { defineCustomElement as defineIonItem } from '@ionic/core/components/ion-item.js';
+import { defineCustomElement as defineIonItemDivider } from '@ionic/core/components/ion-item-divider.js';
+import { defineCustomElement as defineIonItemGroup } from '@ionic/core/components/ion-item-group.js';
+import { defineCustomElement as defineIonItemOption } from '@ionic/core/components/ion-item-option.js';
+import { defineCustomElement as defineIonItemOptions } from '@ionic/core/components/ion-item-options.js';
+import { defineCustomElement as defineIonItemSliding } from '@ionic/core/components/ion-item-sliding.js';
+import { defineCustomElement as defineIonLabel } from '@ionic/core/components/ion-label.js';
+import { defineCustomElement as defineIonList } from '@ionic/core/components/ion-list.js';
+import { defineCustomElement as defineIonListHeader } from '@ionic/core/components/ion-list-header.js';
+import { defineCustomElement as defineIonMenu } from '@ionic/core/components/ion-menu.js';
+import { defineCustomElement as defineIonMenuButton } from '@ionic/core/components/ion-menu-button.js';
+import { defineCustomElement as defineIonMenuToggle } from '@ionic/core/components/ion-menu-toggle.js';
+import { defineCustomElement as defineIonNav } from '@ionic/core/components/ion-nav.js';
+import { defineCustomElement as defineIonNavLink } from '@ionic/core/components/ion-nav-link.js';
+import { defineCustomElement as defineIonNote } from '@ionic/core/components/ion-note.js';
+import { defineCustomElement as defineIonProgressBar } from '@ionic/core/components/ion-progress-bar.js';
+import { defineCustomElement as defineIonRadio } from '@ionic/core/components/ion-radio.js';
+import { defineCustomElement as defineIonRadioGroup } from '@ionic/core/components/ion-radio-group.js';
+import { defineCustomElement as defineIonRange } from '@ionic/core/components/ion-range.js';
+import { defineCustomElement as defineIonRefresher } from '@ionic/core/components/ion-refresher.js';
+import { defineCustomElement as defineIonRefresherContent } from '@ionic/core/components/ion-refresher-content.js';
+import { defineCustomElement as defineIonReorder } from '@ionic/core/components/ion-reorder.js';
+import { defineCustomElement as defineIonReorderGroup } from '@ionic/core/components/ion-reorder-group.js';
+import { defineCustomElement as defineIonRippleEffect } from '@ionic/core/components/ion-ripple-effect.js';
+import { defineCustomElement as defineIonRow } from '@ionic/core/components/ion-row.js';
+import { defineCustomElement as defineIonSearchbar } from '@ionic/core/components/ion-searchbar.js';
+import { defineCustomElement as defineIonSegment } from '@ionic/core/components/ion-segment.js';
+import { defineCustomElement as defineIonSegmentButton } from '@ionic/core/components/ion-segment-button.js';
+import { defineCustomElement as defineIonSelect } from '@ionic/core/components/ion-select.js';
+import { defineCustomElement as defineIonSelectOption } from '@ionic/core/components/ion-select-option.js';
+import { defineCustomElement as defineIonSkeletonText } from '@ionic/core/components/ion-skeleton-text.js';
+import { defineCustomElement as defineIonSlide } from '@ionic/core/components/ion-slide.js';
+import { defineCustomElement as defineIonSlides } from '@ionic/core/components/ion-slides.js';
+import { defineCustomElement as defineIonSpinner } from '@ionic/core/components/ion-spinner.js';
+import { defineCustomElement as defineIonSplitPane } from '@ionic/core/components/ion-split-pane.js';
+import { defineCustomElement as defineIonText } from '@ionic/core/components/ion-text.js';
+import { defineCustomElement as defineIonTextarea } from '@ionic/core/components/ion-textarea.js';
+import { defineCustomElement as defineIonThumbnail } from '@ionic/core/components/ion-thumbnail.js';
+import { defineCustomElement as defineIonTitle } from '@ionic/core/components/ion-title.js';
+import { defineCustomElement as defineIonToggle } from '@ionic/core/components/ion-toggle.js';
+import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/ion-toolbar.js';
+import { defineCustomElement as defineIonVirtualScroll } from '@ionic/core/components/ion-virtual-scroll.js';
 
 
-export const IonAccordion = /*@__PURE__*/ defineContainer<JSX.IonAccordion>('ion-accordion', IonAccordionCmp, [
+export const IonAccordion = /*@__PURE__*/ defineContainer<JSX.IonAccordion>('ion-accordion', defineIonAccordion, [
   'value',
   'disabled',
   'readonly',
@@ -87,7 +87,7 @@ export const IonAccordion = /*@__PURE__*/ defineContainer<JSX.IonAccordion>('ion
 ]);
 
 
-export const IonAccordionGroup = /*@__PURE__*/ defineContainer<JSX.IonAccordionGroup>('ion-accordion-group', IonAccordionGroupCmp, [
+export const IonAccordionGroup = /*@__PURE__*/ defineContainer<JSX.IonAccordionGroup>('ion-accordion-group', defineIonAccordionGroup, [
   'animated',
   'multiple',
   'value',
@@ -99,10 +99,10 @@ export const IonAccordionGroup = /*@__PURE__*/ defineContainer<JSX.IonAccordionG
 'value', 'v-ion-change', 'ionChange');
 
 
-export const IonAvatar = /*@__PURE__*/ defineContainer<JSX.IonAvatar>('ion-avatar', IonAvatarCmp);
+export const IonAvatar = /*@__PURE__*/ defineContainer<JSX.IonAvatar>('ion-avatar', defineIonAvatar);
 
 
-export const IonBackdrop = /*@__PURE__*/ defineContainer<JSX.IonBackdrop>('ion-backdrop', IonBackdropCmp, [
+export const IonBackdrop = /*@__PURE__*/ defineContainer<JSX.IonBackdrop>('ion-backdrop', defineIonBackdrop, [
   'visible',
   'tappable',
   'stopPropagation',
@@ -110,12 +110,12 @@ export const IonBackdrop = /*@__PURE__*/ defineContainer<JSX.IonBackdrop>('ion-b
 ]);
 
 
-export const IonBadge = /*@__PURE__*/ defineContainer<JSX.IonBadge>('ion-badge', IonBadgeCmp, [
+export const IonBadge = /*@__PURE__*/ defineContainer<JSX.IonBadge>('ion-badge', defineIonBadge, [
   'color'
 ]);
 
 
-export const IonBreadcrumb = /*@__PURE__*/ defineContainer<JSX.IonBreadcrumb>('ion-breadcrumb', IonBreadcrumbCmp, [
+export const IonBreadcrumb = /*@__PURE__*/ defineContainer<JSX.IonBreadcrumb>('ion-breadcrumb', defineIonBreadcrumb, [
   'collapsed',
   'last',
   'showCollapsedIndicator',
@@ -135,7 +135,7 @@ export const IonBreadcrumb = /*@__PURE__*/ defineContainer<JSX.IonBreadcrumb>('i
 ]);
 
 
-export const IonBreadcrumbs = /*@__PURE__*/ defineContainer<JSX.IonBreadcrumbs>('ion-breadcrumbs', IonBreadcrumbsCmp, [
+export const IonBreadcrumbs = /*@__PURE__*/ defineContainer<JSX.IonBreadcrumbs>('ion-breadcrumbs', defineIonBreadcrumbs, [
   'color',
   'maxItems',
   'itemsBeforeCollapse',
@@ -144,7 +144,7 @@ export const IonBreadcrumbs = /*@__PURE__*/ defineContainer<JSX.IonBreadcrumbs>(
 ]);
 
 
-export const IonButton = /*@__PURE__*/ defineContainer<JSX.IonButton>('ion-button', IonButtonCmp, [
+export const IonButton = /*@__PURE__*/ defineContainer<JSX.IonButton>('ion-button', defineIonButton, [
   'color',
   'buttonType',
   'disabled',
@@ -165,12 +165,12 @@ export const IonButton = /*@__PURE__*/ defineContainer<JSX.IonButton>('ion-butto
 ]);
 
 
-export const IonButtons = /*@__PURE__*/ defineContainer<JSX.IonButtons>('ion-buttons', IonButtonsCmp, [
+export const IonButtons = /*@__PURE__*/ defineContainer<JSX.IonButtons>('ion-buttons', defineIonButtons, [
   'collapse'
 ]);
 
 
-export const IonCard = /*@__PURE__*/ defineContainer<JSX.IonCard>('ion-card', IonCardCmp, [
+export const IonCard = /*@__PURE__*/ defineContainer<JSX.IonCard>('ion-card', defineIonCard, [
   'color',
   'button',
   'type',
@@ -184,26 +184,26 @@ export const IonCard = /*@__PURE__*/ defineContainer<JSX.IonCard>('ion-card', Io
 ]);
 
 
-export const IonCardContent = /*@__PURE__*/ defineContainer<JSX.IonCardContent>('ion-card-content', IonCardContentCmp);
+export const IonCardContent = /*@__PURE__*/ defineContainer<JSX.IonCardContent>('ion-card-content', defineIonCardContent);
 
 
-export const IonCardHeader = /*@__PURE__*/ defineContainer<JSX.IonCardHeader>('ion-card-header', IonCardHeaderCmp, [
+export const IonCardHeader = /*@__PURE__*/ defineContainer<JSX.IonCardHeader>('ion-card-header', defineIonCardHeader, [
   'color',
   'translucent'
 ]);
 
 
-export const IonCardSubtitle = /*@__PURE__*/ defineContainer<JSX.IonCardSubtitle>('ion-card-subtitle', IonCardSubtitleCmp, [
+export const IonCardSubtitle = /*@__PURE__*/ defineContainer<JSX.IonCardSubtitle>('ion-card-subtitle', defineIonCardSubtitle, [
   'color'
 ]);
 
 
-export const IonCardTitle = /*@__PURE__*/ defineContainer<JSX.IonCardTitle>('ion-card-title', IonCardTitleCmp, [
+export const IonCardTitle = /*@__PURE__*/ defineContainer<JSX.IonCardTitle>('ion-card-title', defineIonCardTitle, [
   'color'
 ]);
 
 
-export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox>('ion-checkbox', IonCheckboxCmp, [
+export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox>('ion-checkbox', defineIonCheckbox, [
   'color',
   'name',
   'checked',
@@ -218,14 +218,14 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox>('ion-c
 'checked', 'v-ion-change', 'ionChange');
 
 
-export const IonChip = /*@__PURE__*/ defineContainer<JSX.IonChip>('ion-chip', IonChipCmp, [
+export const IonChip = /*@__PURE__*/ defineContainer<JSX.IonChip>('ion-chip', defineIonChip, [
   'color',
   'outline',
   'disabled'
 ]);
 
 
-export const IonCol = /*@__PURE__*/ defineContainer<JSX.IonCol>('ion-col', IonColCmp, [
+export const IonCol = /*@__PURE__*/ defineContainer<JSX.IonCol>('ion-col', defineIonCol, [
   'offset',
   'offsetXs',
   'offsetSm',
@@ -253,7 +253,7 @@ export const IonCol = /*@__PURE__*/ defineContainer<JSX.IonCol>('ion-col', IonCo
 ]);
 
 
-export const IonContent = /*@__PURE__*/ defineContainer<JSX.IonContent>('ion-content', IonContentCmp, [
+export const IonContent = /*@__PURE__*/ defineContainer<JSX.IonContent>('ion-content', defineIonContent, [
   'color',
   'fullscreen',
   'forceOverscroll',
@@ -266,7 +266,7 @@ export const IonContent = /*@__PURE__*/ defineContainer<JSX.IonContent>('ion-con
 ]);
 
 
-export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime>('ion-datetime', IonDatetimeCmp, [
+export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime>('ion-datetime', defineIonDatetime, [
   'color',
   'name',
   'disabled',
@@ -300,7 +300,7 @@ export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime>('ion-d
 'value', 'v-ion-change', 'ionChange');
 
 
-export const IonFab = /*@__PURE__*/ defineContainer<JSX.IonFab>('ion-fab', IonFabCmp, [
+export const IonFab = /*@__PURE__*/ defineContainer<JSX.IonFab>('ion-fab', defineIonFab, [
   'horizontal',
   'vertical',
   'edge',
@@ -308,7 +308,7 @@ export const IonFab = /*@__PURE__*/ defineContainer<JSX.IonFab>('ion-fab', IonFa
 ]);
 
 
-export const IonFabButton = /*@__PURE__*/ defineContainer<JSX.IonFabButton>('ion-fab-button', IonFabButtonCmp, [
+export const IonFabButton = /*@__PURE__*/ defineContainer<JSX.IonFabButton>('ion-fab-button', defineIonFabButton, [
   'color',
   'activated',
   'disabled',
@@ -328,30 +328,30 @@ export const IonFabButton = /*@__PURE__*/ defineContainer<JSX.IonFabButton>('ion
 ]);
 
 
-export const IonFabList = /*@__PURE__*/ defineContainer<JSX.IonFabList>('ion-fab-list', IonFabListCmp, [
+export const IonFabList = /*@__PURE__*/ defineContainer<JSX.IonFabList>('ion-fab-list', defineIonFabList, [
   'activated',
   'side'
 ]);
 
 
-export const IonFooter = /*@__PURE__*/ defineContainer<JSX.IonFooter>('ion-footer', IonFooterCmp, [
+export const IonFooter = /*@__PURE__*/ defineContainer<JSX.IonFooter>('ion-footer', defineIonFooter, [
   'collapse',
   'translucent'
 ]);
 
 
-export const IonGrid = /*@__PURE__*/ defineContainer<JSX.IonGrid>('ion-grid', IonGridCmp, [
+export const IonGrid = /*@__PURE__*/ defineContainer<JSX.IonGrid>('ion-grid', defineIonGrid, [
   'fixed'
 ]);
 
 
-export const IonHeader = /*@__PURE__*/ defineContainer<JSX.IonHeader>('ion-header', IonHeaderCmp, [
+export const IonHeader = /*@__PURE__*/ defineContainer<JSX.IonHeader>('ion-header', defineIonHeader, [
   'collapse',
   'translucent'
 ]);
 
 
-export const IonImg = /*@__PURE__*/ defineContainer<JSX.IonImg>('ion-img', IonImgCmp, [
+export const IonImg = /*@__PURE__*/ defineContainer<JSX.IonImg>('ion-img', defineIonImg, [
   'alt',
   'src',
   'ionImgWillLoad',
@@ -360,7 +360,7 @@ export const IonImg = /*@__PURE__*/ defineContainer<JSX.IonImg>('ion-img', IonIm
 ]);
 
 
-export const IonInfiniteScroll = /*@__PURE__*/ defineContainer<JSX.IonInfiniteScroll>('ion-infinite-scroll', IonInfiniteScrollCmp, [
+export const IonInfiniteScroll = /*@__PURE__*/ defineContainer<JSX.IonInfiniteScroll>('ion-infinite-scroll', defineIonInfiniteScroll, [
   'threshold',
   'disabled',
   'position',
@@ -368,13 +368,13 @@ export const IonInfiniteScroll = /*@__PURE__*/ defineContainer<JSX.IonInfiniteSc
 ]);
 
 
-export const IonInfiniteScrollContent = /*@__PURE__*/ defineContainer<JSX.IonInfiniteScrollContent>('ion-infinite-scroll-content', IonInfiniteScrollContentCmp, [
+export const IonInfiniteScrollContent = /*@__PURE__*/ defineContainer<JSX.IonInfiniteScrollContent>('ion-infinite-scroll-content', defineIonInfiniteScrollContent, [
   'loadingSpinner',
   'loadingText'
 ]);
 
 
-export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input', IonInputCmp, [
+export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input', defineIonInput, [
   'fireFocusEvents',
   'color',
   'accept',
@@ -412,7 +412,7 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input',
 'value', 'v-ion-change', 'ionChange');
 
 
-export const IonItem = /*@__PURE__*/ defineContainer<JSX.IonItem>('ion-item', IonItemCmp, [
+export const IonItem = /*@__PURE__*/ defineContainer<JSX.IonItem>('ion-item', defineIonItem, [
   'color',
   'button',
   'detail',
@@ -432,16 +432,16 @@ export const IonItem = /*@__PURE__*/ defineContainer<JSX.IonItem>('ion-item', Io
 ]);
 
 
-export const IonItemDivider = /*@__PURE__*/ defineContainer<JSX.IonItemDivider>('ion-item-divider', IonItemDividerCmp, [
+export const IonItemDivider = /*@__PURE__*/ defineContainer<JSX.IonItemDivider>('ion-item-divider', defineIonItemDivider, [
   'color',
   'sticky'
 ]);
 
 
-export const IonItemGroup = /*@__PURE__*/ defineContainer<JSX.IonItemGroup>('ion-item-group', IonItemGroupCmp);
+export const IonItemGroup = /*@__PURE__*/ defineContainer<JSX.IonItemGroup>('ion-item-group', defineIonItemGroup);
 
 
-export const IonItemOption = /*@__PURE__*/ defineContainer<JSX.IonItemOption>('ion-item-option', IonItemOptionCmp, [
+export const IonItemOption = /*@__PURE__*/ defineContainer<JSX.IonItemOption>('ion-item-option', defineIonItemOption, [
   'color',
   'disabled',
   'download',
@@ -453,19 +453,19 @@ export const IonItemOption = /*@__PURE__*/ defineContainer<JSX.IonItemOption>('i
 ]);
 
 
-export const IonItemOptions = /*@__PURE__*/ defineContainer<JSX.IonItemOptions>('ion-item-options', IonItemOptionsCmp, [
+export const IonItemOptions = /*@__PURE__*/ defineContainer<JSX.IonItemOptions>('ion-item-options', defineIonItemOptions, [
   'side',
   'ionSwipe'
 ]);
 
 
-export const IonItemSliding = /*@__PURE__*/ defineContainer<JSX.IonItemSliding>('ion-item-sliding', IonItemSlidingCmp, [
+export const IonItemSliding = /*@__PURE__*/ defineContainer<JSX.IonItemSliding>('ion-item-sliding', defineIonItemSliding, [
   'disabled',
   'ionDrag'
 ]);
 
 
-export const IonLabel = /*@__PURE__*/ defineContainer<JSX.IonLabel>('ion-label', IonLabelCmp, [
+export const IonLabel = /*@__PURE__*/ defineContainer<JSX.IonLabel>('ion-label', defineIonLabel, [
   'color',
   'position',
   'ionColor',
@@ -473,19 +473,19 @@ export const IonLabel = /*@__PURE__*/ defineContainer<JSX.IonLabel>('ion-label',
 ]);
 
 
-export const IonList = /*@__PURE__*/ defineContainer<JSX.IonList>('ion-list', IonListCmp, [
+export const IonList = /*@__PURE__*/ defineContainer<JSX.IonList>('ion-list', defineIonList, [
   'lines',
   'inset'
 ]);
 
 
-export const IonListHeader = /*@__PURE__*/ defineContainer<JSX.IonListHeader>('ion-list-header', IonListHeaderCmp, [
+export const IonListHeader = /*@__PURE__*/ defineContainer<JSX.IonListHeader>('ion-list-header', defineIonListHeader, [
   'color',
   'lines'
 ]);
 
 
-export const IonMenu = /*@__PURE__*/ defineContainer<JSX.IonMenu>('ion-menu', IonMenuCmp, [
+export const IonMenu = /*@__PURE__*/ defineContainer<JSX.IonMenu>('ion-menu', defineIonMenu, [
   'contentId',
   'menuId',
   'type',
@@ -501,7 +501,7 @@ export const IonMenu = /*@__PURE__*/ defineContainer<JSX.IonMenu>('ion-menu', Io
 ]);
 
 
-export const IonMenuButton = /*@__PURE__*/ defineContainer<JSX.IonMenuButton>('ion-menu-button', IonMenuButtonCmp, [
+export const IonMenuButton = /*@__PURE__*/ defineContainer<JSX.IonMenuButton>('ion-menu-button', defineIonMenuButton, [
   'color',
   'disabled',
   'menu',
@@ -510,13 +510,13 @@ export const IonMenuButton = /*@__PURE__*/ defineContainer<JSX.IonMenuButton>('i
 ]);
 
 
-export const IonMenuToggle = /*@__PURE__*/ defineContainer<JSX.IonMenuToggle>('ion-menu-toggle', IonMenuToggleCmp, [
+export const IonMenuToggle = /*@__PURE__*/ defineContainer<JSX.IonMenuToggle>('ion-menu-toggle', defineIonMenuToggle, [
   'menu',
   'autoHide'
 ]);
 
 
-export const IonNav = /*@__PURE__*/ defineContainer<JSX.IonNav>('ion-nav', IonNavCmp, [
+export const IonNav = /*@__PURE__*/ defineContainer<JSX.IonNav>('ion-nav', defineIonNav, [
   'delegate',
   'swipeGesture',
   'animated',
@@ -529,7 +529,7 @@ export const IonNav = /*@__PURE__*/ defineContainer<JSX.IonNav>('ion-nav', IonNa
 ]);
 
 
-export const IonNavLink = /*@__PURE__*/ defineContainer<JSX.IonNavLink>('ion-nav-link', IonNavLinkCmp, [
+export const IonNavLink = /*@__PURE__*/ defineContainer<JSX.IonNavLink>('ion-nav-link', defineIonNavLink, [
   'component',
   'componentProps',
   'routerDirection',
@@ -537,12 +537,12 @@ export const IonNavLink = /*@__PURE__*/ defineContainer<JSX.IonNavLink>('ion-nav
 ]);
 
 
-export const IonNote = /*@__PURE__*/ defineContainer<JSX.IonNote>('ion-note', IonNoteCmp, [
+export const IonNote = /*@__PURE__*/ defineContainer<JSX.IonNote>('ion-note', defineIonNote, [
   'color'
 ]);
 
 
-export const IonProgressBar = /*@__PURE__*/ defineContainer<JSX.IonProgressBar>('ion-progress-bar', IonProgressBarCmp, [
+export const IonProgressBar = /*@__PURE__*/ defineContainer<JSX.IonProgressBar>('ion-progress-bar', defineIonProgressBar, [
   'type',
   'reversed',
   'value',
@@ -551,7 +551,7 @@ export const IonProgressBar = /*@__PURE__*/ defineContainer<JSX.IonProgressBar>(
 ]);
 
 
-export const IonRadio = /*@__PURE__*/ defineContainer<JSX.IonRadio>('ion-radio', IonRadioCmp, [
+export const IonRadio = /*@__PURE__*/ defineContainer<JSX.IonRadio>('ion-radio', defineIonRadio, [
   'color',
   'name',
   'disabled',
@@ -563,7 +563,7 @@ export const IonRadio = /*@__PURE__*/ defineContainer<JSX.IonRadio>('ion-radio',
 'value', 'v-ion-change', 'ionChange');
 
 
-export const IonRadioGroup = /*@__PURE__*/ defineContainer<JSX.IonRadioGroup>('ion-radio-group', IonRadioGroupCmp, [
+export const IonRadioGroup = /*@__PURE__*/ defineContainer<JSX.IonRadioGroup>('ion-radio-group', defineIonRadioGroup, [
   'allowEmptySelection',
   'name',
   'value',
@@ -572,7 +572,7 @@ export const IonRadioGroup = /*@__PURE__*/ defineContainer<JSX.IonRadioGroup>('i
 'value', 'v-ion-change', 'ionChange');
 
 
-export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange>('ion-range', IonRangeCmp, [
+export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange>('ion-range', defineIonRange, [
   'color',
   'debounce',
   'name',
@@ -594,7 +594,7 @@ export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange>('ion-range',
 'value', 'v-ion-change', 'ionChange');
 
 
-export const IonRefresher = /*@__PURE__*/ defineContainer<JSX.IonRefresher>('ion-refresher', IonRefresherCmp, [
+export const IonRefresher = /*@__PURE__*/ defineContainer<JSX.IonRefresher>('ion-refresher', defineIonRefresher, [
   'pullMin',
   'pullMax',
   'closeDuration',
@@ -607,7 +607,7 @@ export const IonRefresher = /*@__PURE__*/ defineContainer<JSX.IonRefresher>('ion
 ]);
 
 
-export const IonRefresherContent = /*@__PURE__*/ defineContainer<JSX.IonRefresherContent>('ion-refresher-content', IonRefresherContentCmp, [
+export const IonRefresherContent = /*@__PURE__*/ defineContainer<JSX.IonRefresherContent>('ion-refresher-content', defineIonRefresherContent, [
   'pullingIcon',
   'pullingText',
   'refreshingSpinner',
@@ -615,24 +615,24 @@ export const IonRefresherContent = /*@__PURE__*/ defineContainer<JSX.IonRefreshe
 ]);
 
 
-export const IonReorder = /*@__PURE__*/ defineContainer<JSX.IonReorder>('ion-reorder', IonReorderCmp);
+export const IonReorder = /*@__PURE__*/ defineContainer<JSX.IonReorder>('ion-reorder', defineIonReorder);
 
 
-export const IonReorderGroup = /*@__PURE__*/ defineContainer<JSX.IonReorderGroup>('ion-reorder-group', IonReorderGroupCmp, [
+export const IonReorderGroup = /*@__PURE__*/ defineContainer<JSX.IonReorderGroup>('ion-reorder-group', defineIonReorderGroup, [
   'disabled',
   'ionItemReorder'
 ]);
 
 
-export const IonRippleEffect = /*@__PURE__*/ defineContainer<JSX.IonRippleEffect>('ion-ripple-effect', IonRippleEffectCmp, [
+export const IonRippleEffect = /*@__PURE__*/ defineContainer<JSX.IonRippleEffect>('ion-ripple-effect', defineIonRippleEffect, [
   'type'
 ]);
 
 
-export const IonRow = /*@__PURE__*/ defineContainer<JSX.IonRow>('ion-row', IonRowCmp);
+export const IonRow = /*@__PURE__*/ defineContainer<JSX.IonRow>('ion-row', defineIonRow);
 
 
-export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar>('ion-searchbar', IonSearchbarCmp, [
+export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar>('ion-searchbar', defineIonSearchbar, [
   'color',
   'animated',
   'autocomplete',
@@ -662,7 +662,7 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar>('ion
 'value', 'v-ion-change', 'ionChange');
 
 
-export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment>('ion-segment', IonSegmentCmp, [
+export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment>('ion-segment', defineIonSegment, [
   'color',
   'disabled',
   'scrollable',
@@ -676,7 +676,7 @@ export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment>('ion-seg
 'value', 'v-ion-change', 'ionChange');
 
 
-export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButton>('ion-segment-button', IonSegmentButtonCmp, [
+export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButton>('ion-segment-button', defineIonSegmentButton, [
   'disabled',
   'layout',
   'type',
@@ -685,7 +685,7 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButt
 'value', 'v-ion-change', 'ionChange');
 
 
-export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect>('ion-select', IonSelectCmp, [
+export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect>('ion-select', defineIonSelect, [
   'disabled',
   'cancelText',
   'okText',
@@ -706,21 +706,21 @@ export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect>('ion-selec
 'value', 'v-ion-change', 'ionChange');
 
 
-export const IonSelectOption = /*@__PURE__*/ defineContainer<JSX.IonSelectOption>('ion-select-option', IonSelectOptionCmp, [
+export const IonSelectOption = /*@__PURE__*/ defineContainer<JSX.IonSelectOption>('ion-select-option', defineIonSelectOption, [
   'disabled',
   'value'
 ]);
 
 
-export const IonSkeletonText = /*@__PURE__*/ defineContainer<JSX.IonSkeletonText>('ion-skeleton-text', IonSkeletonTextCmp, [
+export const IonSkeletonText = /*@__PURE__*/ defineContainer<JSX.IonSkeletonText>('ion-skeleton-text', defineIonSkeletonText, [
   'animated'
 ]);
 
 
-export const IonSlide = /*@__PURE__*/ defineContainer<JSX.IonSlide>('ion-slide', IonSlideCmp);
+export const IonSlide = /*@__PURE__*/ defineContainer<JSX.IonSlide>('ion-slide', defineIonSlide);
 
 
-export const IonSlides = /*@__PURE__*/ defineContainer<JSX.IonSlides>('ion-slides', IonSlidesCmp, [
+export const IonSlides = /*@__PURE__*/ defineContainer<JSX.IonSlides>('ion-slides', defineIonSlides, [
   'options',
   'pager',
   'scrollbar',
@@ -743,7 +743,7 @@ export const IonSlides = /*@__PURE__*/ defineContainer<JSX.IonSlides>('ion-slide
 ]);
 
 
-export const IonSpinner = /*@__PURE__*/ defineContainer<JSX.IonSpinner>('ion-spinner', IonSpinnerCmp, [
+export const IonSpinner = /*@__PURE__*/ defineContainer<JSX.IonSpinner>('ion-spinner', defineIonSpinner, [
   'color',
   'duration',
   'name',
@@ -751,7 +751,7 @@ export const IonSpinner = /*@__PURE__*/ defineContainer<JSX.IonSpinner>('ion-spi
 ]);
 
 
-export const IonSplitPane = /*@__PURE__*/ defineContainer<JSX.IonSplitPane>('ion-split-pane', IonSplitPaneCmp, [
+export const IonSplitPane = /*@__PURE__*/ defineContainer<JSX.IonSplitPane>('ion-split-pane', defineIonSplitPane, [
   'contentId',
   'disabled',
   'when',
@@ -759,12 +759,12 @@ export const IonSplitPane = /*@__PURE__*/ defineContainer<JSX.IonSplitPane>('ion
 ]);
 
 
-export const IonText = /*@__PURE__*/ defineContainer<JSX.IonText>('ion-text', IonTextCmp, [
+export const IonText = /*@__PURE__*/ defineContainer<JSX.IonText>('ion-text', defineIonText, [
   'color'
 ]);
 
 
-export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea>('ion-textarea', IonTextareaCmp, [
+export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea>('ion-textarea', defineIonTextarea, [
   'fireFocusEvents',
   'color',
   'autocapitalize',
@@ -795,17 +795,17 @@ export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea>('ion-t
 'value', 'v-ion-change', 'ionChange');
 
 
-export const IonThumbnail = /*@__PURE__*/ defineContainer<JSX.IonThumbnail>('ion-thumbnail', IonThumbnailCmp);
+export const IonThumbnail = /*@__PURE__*/ defineContainer<JSX.IonThumbnail>('ion-thumbnail', defineIonThumbnail);
 
 
-export const IonTitle = /*@__PURE__*/ defineContainer<JSX.IonTitle>('ion-title', IonTitleCmp, [
+export const IonTitle = /*@__PURE__*/ defineContainer<JSX.IonTitle>('ion-title', defineIonTitle, [
   'color',
   'size',
   'ionStyle'
 ]);
 
 
-export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle>('ion-toggle', IonToggleCmp, [
+export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle>('ion-toggle', defineIonToggle, [
   'color',
   'name',
   'checked',
@@ -819,12 +819,12 @@ export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle>('ion-toggl
 'checked', 'v-ion-change', 'ionChange');
 
 
-export const IonToolbar = /*@__PURE__*/ defineContainer<JSX.IonToolbar>('ion-toolbar', IonToolbarCmp, [
+export const IonToolbar = /*@__PURE__*/ defineContainer<JSX.IonToolbar>('ion-toolbar', defineIonToolbar, [
   'color'
 ]);
 
 
-export const IonVirtualScroll = /*@__PURE__*/ defineContainer<JSX.IonVirtualScroll>('ion-virtual-scroll', IonVirtualScrollCmp, [
+export const IonVirtualScroll = /*@__PURE__*/ defineContainer<JSX.IonVirtualScroll>('ion-virtual-scroll', defineIonVirtualScroll, [
   'approxItemHeight',
   'approxHeaderHeight',
   'approxFooterHeight',
diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts
index 6f587d1fd0..4ba80a2310 100644
--- a/packages/vue/src/vue-component-lib/utils.ts
+++ b/packages/vue/src/vue-component-lib/utils.ts
@@ -51,7 +51,7 @@ const getElementClasses = (ref: Ref<HTMLElement | undefined>, componentClasses:
 */
 export const defineContainer = <Props>(
   name: string,
-  customElement: any,
+  defineCustomElement: any,
   componentProps: string[] = [],
   modelProp?: string,
   modelUpdateEvent?: string,
@@ -63,12 +63,8 @@ export const defineContainer = <Props>(
   * They refer to whatever properties are set on an instance of a component.
   */
 
-  if (
-    customElement !== undefined &&
-    typeof customElements !== 'undefined' &&
-    !customElements.get(name)
-  ) {
-    customElements.define(name, customElement);
+  if (defineCustomElement !== undefined) {
+    defineCustomElement();
   }
 
   const Container = defineComponent<Props & InputProps>((props: any, { attrs, slots, emit }) => {