fix(customElement): customElement can emit event (#7296)

close https://github.com/vuejs/core/issues/7293

diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index 7d873f5a1253171af526a3f2c179c2e235c5446a..83eedc4ccef54ea5c3bf103de287122b01e7b754 100644 (file)
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -672,7 +672,8 @@ export function cloneVNode<T, U>(
     ssFallback: vnode.ssFallback && cloneVNode(vnode.ssFallback),
     el: vnode.el,
     anchor: vnode.anchor,
-    ctx: vnode.ctx
+    ctx: vnode.ctx,
+    ce: vnode.ce
   }
   if (__COMPAT__) {
     defineLegacyVNodeProperties(cloned as VNode)

diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index 7826f43830041595053cfb88101364c8eef5a8f8..f4199192278aeb429fad59f01b8f4201eafb9346 100644 (file)
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -384,6 +384,25 @@ describe('defineCustomElement', () => {
         detail: [1]
       })
     })
+    // #7293
+    test('emit in an async component wrapper with properties bound', async () => {
+      const E = defineCustomElement(
+        defineAsyncComponent(
+          () => new Promise<typeof CompDef>(res => res(CompDef as any))
+        )
+      )
+      customElements.define('my-async-el-props-emits', E)
+      container.innerHTML = `<my-async-el-props-emits id="my_async_el_props_emits"></my-async-el-props-emits>`
+      const e = container.childNodes[0] as VueElement
+      const spy = jest.fn()
+      e.addEventListener('my-click', spy)
+      await customElements.whenDefined('my-async-el-props-emits')
+      e.shadowRoot!.childNodes[0].dispatchEvent(new CustomEvent('click'))
+      expect(spy).toHaveBeenCalled()
+      expect(spy.mock.calls[0][0]).toMatchObject({
+        detail: [1]
+      })
+    })
   })
 
   describe('slots', () => {