fix(vue): popover positioning is now correct with custom elements bui…

…ld (#23680)

core/src/utils/transition/index.ts

@@ -2,7 +2,7 @@ import { Build, writeTask } from '@stencil/core';
 
 import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '../../components/nav/constants';
 import { Animation, AnimationBuilder, NavDirection, NavOptions } from '../../interface';
-import { componentOnReady } from '../helpers';
+import { componentOnReady, raf } from '../helpers';
 
 const iosTransitionAnimation = () => import('./ios.transition');
 const mdTransitionAnimation = () => import('./md.transition');
@@ -205,6 +205,19 @@ export const deepReady = async (el: any | undefined): Promise<void> => {
       if (stencilEl != null) {
         return;
       }
+
+    /**
+     * Custom elements in Stencil will have __registerHost.
+     */
+    } else if (element.__registerHost != null) {
+      /**
+       * Non-lazy loaded custom elements need to wait
+       * one frame for component to be loaded.
+       */
+      const waitForCustomElement = new Promise(resolve => raf(resolve));
+      await waitForCustomElement;
+
+      return;
     }
     await Promise.all(Array.from(element.children).map(deepReady));
   }