fix(custom-element): preserve nested async mount order (#15154)

Closes #15153

Author: edison1105

packages/runtime-dom/__tests__/customElement.spec.ts

@@ -2210,6 +2210,118 @@ describe('defineCustomElement', () => {
     expect(barVal).toBe('bar')
   })
 
+  test('nested async custom elements should mount ancestor-first', async () => {
+    const mounted: string[] = []
+    const OuterComp = defineComponent({
+      setup() {
+        provide('foo', 'foo')
+      },
+      mounted() {
+        mounted.push('outer')
+      },
+      render() {
+        return h('slot')
+      },
+    })
+    const MiddleComp = defineComponent({
+      setup() {
+        provide('bar', 'bar')
+      },
+      mounted() {
+        mounted.push('middle')
+      },
+      render() {
+        return h('slot')
+      },
+    })
+    const InnerComp = defineComponent({
+      setup() {
+        const foo = inject('foo')
+        const bar = inject('bar')
+        return () => h('div', `${foo}/${bar}`)
+      },
+      mounted() {
+        mounted.push('inner')
+      },
+    })
+    let resolveOuter!: (comp: typeof OuterComp) => void
+    let resolveMiddle!: (comp: typeof MiddleComp) => void
+    let resolveInner!: (comp: typeof InnerComp) => void
+    const outerReady = new Promise<typeof OuterComp>(resolve => {
+      resolveOuter = resolve
+    })
+    const middleReady = new Promise<typeof MiddleComp>(resolve => {
+      resolveMiddle = resolve
+    })
+    const innerReady = new Promise<typeof InnerComp>(resolve => {
+      resolveInner = resolve
+    })
+
+    const Outer = defineCustomElement(defineAsyncComponent(() => outerReady))
+    const Middle = defineCustomElement(defineAsyncComponent(() => middleReady))
+    const Inner = defineCustomElement(defineAsyncComponent(() => innerReady))
+
+    customElements.define('async-chain-outer', Outer)
+    customElements.define('async-chain-middle', Middle)
+    customElements.define('async-chain-inner', Inner)
+    container.innerHTML =
+      `<async-chain-outer>` +
+      `<async-chain-middle>` +
+      `<async-chain-inner></async-chain-inner>` +
+      `</async-chain-middle>` +
+      `</async-chain-outer>`
+
+    resolveInner(InnerComp)
+    resolveOuter(OuterComp)
+    await new Promise(resolve => setTimeout(resolve))
+    resolveMiddle(MiddleComp)
+    await new Promise(resolve => setTimeout(resolve))
+
+    const inner = container.querySelector('async-chain-inner') as VueElement
+    expect(mounted).toEqual(['outer', 'middle', 'inner'])
+    expect(inner.shadowRoot!.innerHTML).toBe('<div>foo/bar</div>')
+  })
+
+  test('should not resolve nested custom element after disconnect', async () => {
+    const mounted = vi.fn()
+    const ParentComp = defineComponent({
+      render() {
+        return h('slot')
+      },
+    })
+    let resolveParent!: (comp: typeof ParentComp) => void
+    const parentReady = new Promise<typeof ParentComp>(resolve => {
+      resolveParent = resolve
+    })
+    const Parent = defineCustomElement(defineAsyncComponent(() => parentReady))
+    const Child = defineCustomElement({
+      mounted,
+      render() {
+        return h('div', 'child')
+      },
+    })
+
+    customElements.define('async-disconnect-parent', Parent)
+    customElements.define('async-disconnect-child', Child)
+    container.innerHTML =
+      `<async-disconnect-parent>` +
+      `<async-disconnect-child></async-disconnect-child>` +
+      `</async-disconnect-parent>`
+
+    const parent = container.firstChild as VueElement
+    const child = parent.firstChild as VueElement
+    child.remove()
+    resolveParent(ParentComp)
+    await new Promise(resolve => setTimeout(resolve))
+
+    expect(mounted).not.toHaveBeenCalled()
+    expect(child.shadowRoot!.innerHTML).toBe('')
+
+    parent.appendChild(child)
+    expect(mounted).toHaveBeenCalledOnce()
+    expect(child.shadowRoot!.innerHTML).toBe('<div>child</div>')
+  })
+
   describe('configureApp', () => {
     test('should work', () => {
       const E = defineCustomElement(

packages/runtime-dom/src/apiCustomElement.ts

@@ -313,7 +313,9 @@ export class VueElement
         if (parent && parent._pendingResolve) {
           this._pendingResolve = parent._pendingResolve.then(() => {
             this._pendingResolve = undefined
-            this._resolveDef()
+            if (this.isConnected) {
+              return this._resolveDef()
+            }
           })
         } else {
           this._resolveDef()
@@ -371,7 +373,7 @@ export class VueElement
    */
   private _resolveDef() {
     if (this._pendingResolve) {
-      return
+      return this._pendingResolve
     }
 
     // set initial attrs
@@ -428,6 +430,7 @@ export class VueElement
         def.configureApp = this._def.configureApp
         resolve((this._def = def), true)
       })
+      return this._pendingResolve
     } else {
       resolve(this._def)
     }