From 96dd5e14b3382f98f7f12b4380c5f077246150ff Mon Sep 17 00:00:00 2001 From: baiwusanyu-c <740132583@qq.com> Date: Thu, 8 Dec 2022 13:54:22 +0800 Subject: [PATCH 1/2] fix(customElement): customElement can emit event --- packages/runtime-core/src/vnode.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts index 7d873f5a125..83eedc4ccef 100644 --- a/packages/runtime-core/src/vnode.ts +++ b/packages/runtime-core/src/vnode.ts @@ -672,7 +672,8 @@ export function cloneVNode( 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) From 30769d3a2cb84e97ea867407c4d607543c8b1381 Mon Sep 17 00:00:00 2001 From: baiwusanyu-c <740132583@qq.com> Date: Thu, 8 Dec 2022 14:11:48 +0800 Subject: [PATCH 2/2] fix(customElement): added unit test --- .../__tests__/customElement.spec.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 7826f438300..f4199192278 100644 --- 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(res => res(CompDef as any)) + ) + ) + customElements.define('my-async-el-props-emits', E) + container.innerHTML = `` + 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', () => {