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,77 @@ 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><div><slotted-child></slotted-child></div></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')
+    })
+    test('async & multiple levels of 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({
+        render(this: any) {
+          return h('div', null, [renderSlot(this.$slots, 'default')])
+        }
+      })
+
+      const EChild2 = defineCustomElement({
+        setup(props) {
+          fooVal = inject('foo')
+        },
+        render(this: any) {
+          return h('div', null, 'child')
+        }
+      })
+      customElements.define('my-el-async-nested-m-ce', E)
+      customElements.define('slotted-child-m', EChild)
+      customElements.define('slotted-child2-m', EChild2)
+      container.innerHTML = `<my-el-async-nested-m-ce><div><slotted-child-m><slotted-child2-m></slotted-child2-m></slotted-child-m></div></my-el-async-nested-m-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,8 @@ export class VueElement extends BaseClass {
   private _numberProps: Record<string, true> | null = null
   private _styles?: HTMLStyleElement[]
   private _ob?: MutationObserver | null = null
+  private _ce_parent?: VueElement | null = null
+  private _ce_children?: VueElement[] | null = null
   constructor(
     private _def: InnerComponentDef,
     private _props: Record<string, any> = {},
@@ -208,7 +210,31 @@ export class VueElement extends BaseClass {
       if (this._resolved) {
         this._update()
       } else {
-        this._resolveDef()
+        let parent: Node | null = this
+        let isParentResolved = true
+        // Recursively find the parent's custom element and set it to '_ce_parent‘
+        while (
+          (parent =
+            parent && (parent.parentNode || (parent as ShadowRoot).host))
+        ) {
+          if (parent instanceof VueElement) {
+            this._ce_parent = parent as VueElement
+            // If the parent's custom element is asynchronous or not yet resolved
+            if (
+              (parent._def as ComponentOptions).__asyncLoader ||
+              !parent._resolved
+            ) {
+              // Store the current custom element in the parent's _ce_children
+              // and wait for the parent to be resolved before executing
+              ;(parent._ce_children || (parent._ce_children = [])).push(this)
+              isParentResolved = false
+            }
+            break
+          }
+        }
+        if (isParentResolved) {
+          this._resolveDef()
+        }
       }
     }
   }
@@ -231,8 +257,6 @@ export class VueElement extends BaseClass {
    * resolve inner component definition (handle possible async component)
    */
   private _resolveDef() {
-    this._resolved = true
-
     // set initial attrs
     for (let i = 0; i < this.attributes.length; i++) {
       this._setAttr(this.attributes[i].name)
@@ -248,6 +272,7 @@ export class VueElement extends BaseClass {
     this._ob.observe(this, { attributes: true })
 
     const resolve = (def: InnerComponentDef, isAsync = false) => {
+      this._resolved = true
       const { props, styles } = def
 
       // cast Number-type props set before resolve
@@ -278,6 +303,12 @@ export class VueElement extends BaseClass {
 
       // initial render
       this._update()
+
+      // The asynchronous custom element needs to call
+      // the resolveDef function of the descendant custom element at the end.
+      if (this._ce_children) {
+        this._ce_children.forEach(child => child._resolveDef())
+      }
     }
 
     const asyncDef = (this._def as ComponentOptions).__asyncLoader
@@ -397,17 +428,9 @@ export class VueElement extends BaseClass {
           }
         }
 
-        // locate nearest Vue custom element parent for provide/inject
-        let parent: Node | null = this
-        while (
-          (parent =
-            parent && (parent.parentNode || (parent as ShadowRoot).host))
-        ) {
-          if (parent instanceof VueElement) {
-            instance.parent = parent._instance
-            instance.provides = parent._instance!.provides
-            break
-          }
+        if (this._ce_parent) {
+          instance.parent = this._ce_parent._instance
+          instance.provides = this._ce_parent._instance!.provides
         }
       }
     }