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
+ // locate nearest Vue custom element parent 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
  }
  }
  }