From 4897af96bb3d6a67b995d7b5f27aad1418a88922 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Tue, 1 Nov 2022 09:49:06 +0100 Subject: [PATCH] fix(runtime-dom): ensure customElement handles empty props correctly. (#6182) fix Scoped attribute in Vue file affects the use of web component #6163,#6895 --- .../runtime-dom/__tests__/customElement.spec.ts | 14 ++++++++++++++ packages/runtime-dom/src/apiCustomElement.ts | 2 +- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 300cc2322ce..dd087ad279d 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -210,6 +210,20 @@ describe('defineCustomElement', () => { customElements.define('my-el-upgrade', E) expect(el.shadowRoot.innerHTML).toBe(`foo: hello`) }) + + // https://github.com/vuejs/core/issues/6163 + test('handle components with no props', async () => { + const E = defineCustomElement({ + render() { + return h('div', 'foo') + } + }) + customElements.define('my-element-noprops', E) + const el = document.createElement('my-element-noprops') + container.appendChild(el) + await nextTick() + expect(el.shadowRoot!.innerHTML).toMatchInlineSnapshot('"
foo
"') + }) }) describe('emits', () => { diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index 5ff45d652f2..32beffe126a 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -215,7 +215,7 @@ export class VueElement extends BaseClass { }).observe(this, { attributes: true }) const resolve = (def: InnerComponentDef) => { - const { props, styles } = def + const { props = {}, styles } = def const hasOptions = !isArray(props) const rawKeys = props ? (hasOptions ? Object.keys(props) : props) : []