diff --git a/core/src/utils/transition/index.ts b/core/src/utils/transition/index.ts index 203d07d160..5c7ca4fb7a 100644 --- a/core/src/utils/transition/index.ts +++ b/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 => { 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)); }