fix(overlays): move prepareOverlay to connectedCallback

For custom elements builds, overlays cannot use hasAttribute() in the constructor, so moving it to connectedCallback instead.

core/src/components/action-sheet/action-sheet.tsx

@@ -117,7 +117,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     return present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
   }
 
-  constructor() {
+  connectedCallback() {
     prepareOverlay(this.el);
   }
 

core/src/components/alert/alert.tsx

@@ -167,7 +167,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
     }) as AlertInput);
   }
 
-  constructor() {
+  connectedCallback() {
     prepareOverlay(this.el);
   }
 

core/src/components/loading/loading.tsx

@@ -111,7 +111,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
    */
   @Event({ eventName: 'ionLoadingDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
-  constructor() {
+  connectedCallback() {
     prepareOverlay(this.el);
   }
 

core/src/components/modal/modal.tsx

@@ -130,7 +130,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
     }
   }
 
-  constructor() {
+  connectedCallback() {
     prepareOverlay(this.el);
   }
 

core/src/components/picker/picker.tsx

@@ -100,7 +100,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
    */
   @Event({ eventName: 'ionPickerDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
-  constructor() {
+  connectedCallback() {
     prepareOverlay(this.el);
   }
 

core/src/components/popover/popover.tsx

@@ -115,7 +115,7 @@ export class Popover implements ComponentInterface, OverlayInterface {
    */
   @Event({ eventName: 'ionPopoverDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
-  constructor() {
+  connectedCallback() {
     prepareOverlay(this.el);
   }
 

core/src/components/toast/toast.tsx

@@ -126,7 +126,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
    */
   @Event({ eventName: 'ionToastDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
-  constructor() {
+  connectedCallback() {
     prepareOverlay(this.el);
   }
 

core/src/utils/overlays.ts

@@ -31,8 +31,10 @@ export const popoverController = /*@__PURE__*/createController<PopoverOptions, H
 export const toastController = /*@__PURE__*/createController<ToastOptions, HTMLIonToastElement>('ion-toast');
 
 export const prepareOverlay = <T extends HTMLIonOverlayElement>(el: T) => {
-  const doc = document;
-  connectListeners(doc);
+  /* tslint:disable-next-line */
+  if (typeof document !== 'undefined') {
+    connectListeners(document);
+  }
   const overlayIndex = lastId++;
   el.overlayIndex = overlayIndex;
   if (!el.hasAttribute('id')) {
@@ -41,20 +43,23 @@ export const prepareOverlay = <T extends HTMLIonOverlayElement>(el: T) => {
 };
 
 export const createOverlay = <T extends HTMLIonOverlayElement>(tagName: string, opts: object | undefined): Promise<T> => {
-  return customElements.whenDefined(tagName).then(() => {
-    const doc = document;
-    const element = doc.createElement(tagName) as HTMLIonOverlayElement;
-    element.classList.add('overlay-hidden');
+  /* tslint:disable-next-line */
+  if (typeof customElements !== 'undefined') {
+    return customElements.whenDefined(tagName).then(() => {
+      const element = document.createElement(tagName) as HTMLIonOverlayElement;
+      element.classList.add('overlay-hidden');
 
-    // convert the passed in overlay options into props
-    // that get passed down into the new overlay
-    Object.assign(element, opts);
+      // convert the passed in overlay options into props
+      // that get passed down into the new overlay
+      Object.assign(element, opts);
 
-    // append the overlay element to the document body
-    getAppRoot(doc).appendChild(element);
+      // append the overlay element to the document body
+      getAppRoot(document).appendChild(element);
 
-    return element.componentOnReady() as any;
-  });
+      return element.componentOnReady() as any;
+    });
+  }
+  return Promise.resolve() as any;
 };
 
 export const connectListeners = (doc: Document) => {