fix(customElement): handle configure app work with async component

Author: edison1105

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

@@ -1330,6 +1330,29 @@ describe('defineCustomElement', () => {
 
       expect(e.shadowRoot?.innerHTML).toBe('<div>app-injected</div>')
     })
+
+    // #12448
+    test('work with async component', async () => {
+      const AsyncComp = defineAsyncComponent(() => {
+        return Promise.resolve({
+          render() {
+            const msg: string | undefined = inject('msg')
+            return h('div', {}, msg)
+          },
+        } as any)
+      })
+      const E = defineCustomElement(AsyncComp, {
+        configureApp(app) {
+          app.provide('msg', 'app-injected')
+        },
+      })
+      customElements.define('my-async-element-with-app', E)
+
+      container.innerHTML = `<my-async-element-with-app></my-async-element-with-app>`
+      const e = container.childNodes[0] as VueElement
+      await new Promise(r => setTimeout(r))
+      expect(e.shadowRoot?.innerHTML).toBe('<div>app-injected</div>')
+    })
   })
 
   // #9885

packages/runtime-dom/src/apiCustomElement.ts

@@ -403,9 +403,10 @@ export class VueElement
 
     const asyncDef = (this._def as ComponentOptions).__asyncLoader
     if (asyncDef) {
-      this._pendingResolve = asyncDef().then(def =>
-        resolve((this._def = def), true),
-      )
+      this._pendingResolve = asyncDef().then((def: InnerComponentDef) => {
+        if (this._def.configureApp) def.configureApp = this._def.configureApp
+        resolve((this._def = def), true)
+      })
     } else {
       resolve(this._def)
     }