fix(custom-element): custom elements can be injected correctly

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

@@ -1,4 +1,5 @@
 import {
+ type Ref,
  type Ref,
  type VueElement,
  createApp,
@@ -8,6 +9,7 @@ import {
  h,
  inject,
  nextTick,
+ provide,
  ref,
  render,
  renderSlot,
@@ -520,6 +522,67 @@ describe('defineCustomElement', () => {
  })
  customElements.define('my-consumer', Consumer)
 
+ // # 8127
+ test('correct injection of asynchronous custom elements', async () => {
+ const comp = {
+ setup() {
+ provide('message', 'hello')
+ },
+ render(this: any) {
+ return h('my-el-async-c')
+ },
+ }
+ const P = defineCustomElement(
+ defineAsyncComponent(() => {
+ return new Promise<typeof comp>(resolve => {
+ setTimeout(() => {
+ resolve(comp)
+ }, 200)
+ })
+ }),
+ )
+
+ const compChild = {
+ setup() {
+ const message = inject('message', 'vue')
+ return { message }
+ },
+ render(this: { message: string }) {
+ return h('div', this.message)
+ },
+ }
+
+ const C = defineCustomElement(
+ defineAsyncComponent(() => {
+ return new Promise<typeof compChild>(resolve => {
+ setTimeout(() => {
+ resolve(compChild)
+ }, 200)
+ })
+ }),
+ )
+ customElements.define('my-el-async-c', C)
+ customElements.define('my-el-async-p', P)
+
+ container.innerHTML = `<my-el-async-p><my-el-async-c></my-el-async-c></my-el-async-p><div id="anchor">anchor</div>`
+
+ setTimeout(() => {
+ const parentComponent = container.querySelector('my-el-async-p')
+ const anchor = container.querySelector('#anchor') as VueElement
+ anchor.appendChild(parentComponent as VueElement)
+ }, 100)
+
+ await new Promise(r => setTimeout(r, 500))
+
+ const e = container.childNodes[0].childNodes[1] as VueElement
+ const cInner = (e.shadowRoot!.childNodes[0] as VueElement).shadowRoot!
+ .innerHTML
+ expect(cInner).toBe(`<div>hello</div>`)
+ expect((container.childNodes[0].childNodes[0] as Text).data).toBe(
+ `anchor`,
+ )
+ })
+
  test('over nested usage', async () => {
  const foo = ref('injected!')
  const Provider = defineCustomElement({

packages/runtime-dom/src/apiCustomElement.ts

@@ -245,8 +245,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)
@@ -262,6 +260,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