diff --git a/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx b/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx
index c966b41c65..aaac43c8e7 100644
--- a/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx
+++ b/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx
@@ -33,7 +33,7 @@ export class ActionSheetController implements OverlayController {
    */
   @Method()
   create(opts?: ActionSheetOptions): Promise<HTMLIonActionSheetElement> {
-    return createOverlay('ion-action-sheet', opts);
+    return createOverlay(document.createElement('ion-action-sheet'), opts);
   }
 
   /*
diff --git a/packages/core/src/components/alert-controller/alert-controller.tsx b/packages/core/src/components/alert-controller/alert-controller.tsx
index fbbf12bb7c..864fd6316b 100644
--- a/packages/core/src/components/alert-controller/alert-controller.tsx
+++ b/packages/core/src/components/alert-controller/alert-controller.tsx
@@ -30,7 +30,7 @@ export class AlertController implements OverlayController {
    */
   @Method()
   create(opts?: AlertOptions): Promise<HTMLIonAlertElement> {
-    return createOverlay('ion-alert', opts);
+    return createOverlay(document.createElement('ion-alert'), opts);
   }
 
   /*
diff --git a/packages/core/src/components/loading-controller/loading-controller.tsx b/packages/core/src/components/loading-controller/loading-controller.tsx
index 21d781b4b1..04dd3eb0ce 100644
--- a/packages/core/src/components/loading-controller/loading-controller.tsx
+++ b/packages/core/src/components/loading-controller/loading-controller.tsx
@@ -30,7 +30,7 @@ export class LoadingController implements OverlayController {
    */
   @Method()
   create(opts?: LoadingOptions): Promise<HTMLIonLoadingElement> {
-    return createOverlay('ion-loading', opts);
+    return createOverlay(document.createElement('ion-loading'), opts);
   }
 
   /*
diff --git a/packages/core/src/components/modal-controller/modal-controller.tsx b/packages/core/src/components/modal-controller/modal-controller.tsx
index 6b039ebb31..75b87acccc 100644
--- a/packages/core/src/components/modal-controller/modal-controller.tsx
+++ b/packages/core/src/components/modal-controller/modal-controller.tsx
@@ -30,7 +30,7 @@ export class ModalController implements OverlayController {
    */
   @Method()
   create(opts?: ModalOptions): Promise<HTMLIonModalElement> {
-    return createOverlay('ion-modal', opts);
+    return createOverlay(document.createElement('ion-modal'), opts);
   }
 
   /*
diff --git a/packages/core/src/components/picker-controller/picker-controller.tsx b/packages/core/src/components/picker-controller/picker-controller.tsx
index 0704c8356c..47bde98ebd 100644
--- a/packages/core/src/components/picker-controller/picker-controller.tsx
+++ b/packages/core/src/components/picker-controller/picker-controller.tsx
@@ -30,7 +30,7 @@ export class PickerController implements OverlayController {
    */
   @Method()
   create(opts?: PickerOptions): Promise<HTMLIonPickerElement> {
-    return createOverlay('ion-picker', opts);
+    return createOverlay(document.createElement('ion-picker'), opts);
   }
 
   /*
diff --git a/packages/core/src/components/popover-controller/popover-controller.tsx b/packages/core/src/components/popover-controller/popover-controller.tsx
index 0656b9b5ec..bec5a813c6 100644
--- a/packages/core/src/components/popover-controller/popover-controller.tsx
+++ b/packages/core/src/components/popover-controller/popover-controller.tsx
@@ -29,7 +29,7 @@ export class PopoverController implements OverlayController {
    */
   @Method()
   create(opts?: PopoverOptions): Promise<HTMLIonPopoverElement> {
-    return createOverlay('ion-popover', opts);
+    return createOverlay(document.createElement('ion-popover'), opts);
   }
 
   /*
diff --git a/packages/core/src/components/toast-controller/toast-controller.tsx b/packages/core/src/components/toast-controller/toast-controller.tsx
index 430e6734c6..df50ebc52f 100644
--- a/packages/core/src/components/toast-controller/toast-controller.tsx
+++ b/packages/core/src/components/toast-controller/toast-controller.tsx
@@ -30,7 +30,7 @@ export class ToastController implements OverlayController {
    */
   @Method()
   create(opts?: ToastOptions): Promise<HTMLIonToastElement> {
-    return createOverlay('ion-toast', opts);
+    return createOverlay(document.createElement('ion-toast'), opts);
   }
 
   /*
diff --git a/packages/core/src/utils/overlays.ts b/packages/core/src/utils/overlays.ts
index 3c1765beea..24720cfad7 100644
--- a/packages/core/src/utils/overlays.ts
+++ b/packages/core/src/utils/overlays.ts
@@ -12,11 +12,7 @@ export type Requires<K extends string> = {
 
 export function createOverlay
 <T extends HTMLIonOverlayElement & Requires<keyof B>, B>
-(tagName: string, opts: B): Promise<T> {
-  // create ionic's wrapping ion-alert component
-  const element = document.createElement(tagName) as T;
-
-  // give this alert a unique id
+(element: T, opts: B): Promise<T> {
   element.overlayId = lastId++;
 
   // convert the passed in overlay options into props