fix(custom-element): Use asynchronous custom element nesting to avoid errors

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

@@ -5,6 +5,7 @@ import {
   h,
   inject,
   nextTick,
+  provide,
   Ref,
   ref,
   renderSlot,
@@ -692,5 +693,38 @@ describe('defineCustomElement', () => {
         `<div><slot><div>fallback</div></slot></div><div><slot name="named"></slot></div>`
       )
     })
+
+    test('async & nested custom elements', async () => {
+      let fooVal: string | undefined = ''
+      const E = defineCustomElement(
+        defineAsyncComponent(() => {
+          return Promise.resolve({
+            setup(props) {
+              provide('foo', 'foo')
+            },
+            render(this: any) {
+              return h('div', null, [renderSlot(this.$slots, 'default')])
+            }
+          })
+        })
+      )
+
+      const EChild = defineCustomElement({
+        setup(props) {
+          fooVal = inject('foo')
+        },
+        render(this: any) {
+          return h('div', null, 'child')
+        }
+      })
+      customElements.define('my-el-async-nested-ce', E)
+      customElements.define('slotted-child', EChild)
+      container.innerHTML = `<my-el-async-nested-ce><slotted-child></slotted-child></my-el-async-nested-ce>`
+
+      await new Promise(r => setTimeout(r))
+      const e = container.childNodes[0] as VueElement
+      expect(e.shadowRoot!.innerHTML).toBe(`<div><slot></slot></div>`)
+      expect(fooVal).toBe('foo')
+    })
   })
 })

packages/runtime-dom/src/apiCustomElement.ts

@@ -179,6 +179,7 @@ export class VueElement extends BaseClass {
   private _numberProps: Record<string, true> | null = null
   private _styles?: HTMLStyleElement[]
   private _ob?: MutationObserver | null = null
+  private _childResolve: Array<() => void> = []
   constructor(
     private _def: InnerComponentDef,
     private _props: Record<string, any> = {},
@@ -282,9 +283,28 @@ export class VueElement extends BaseClass {
 
     const asyncDef = (this._def as ComponentOptions).__asyncLoader
     if (asyncDef) {
-      asyncDef().then(def => resolve(def, true))
+      asyncDef().then(def => {
+        resolve(def, true)
+        if (this._childResolve.length > 0) {
+          this._childResolve.forEach((childResolveFn: () => void) => {
+            childResolveFn()
+          })
+        }
+      })
     } else {
-      resolve(this._def)
+      // When parentNode is a custom element rendered by an asynchronous component,
+      // it is collected and waits for the asynchronous
+      // completion before executing the resolve function.
+      const parentNode = this.parentNode as typeof this
+      if (
+        parentNode &&
+        parentNode._def &&
+        (parentNode._def as ComponentOptions).__asyncLoader
+      ) {
+        parentNode._childResolve.push(() => resolve(this._def))
+      } else {
+        resolve(this._def)
+      }
     }
   }