From e527c8c7bf4e927f87ca962cf84c420b634a2514 Mon Sep 17 00:00:00 2001 From: Thorsten Luenborg Date: Sat, 25 Jun 2022 12:32:16 +0200 Subject: [PATCH] fix(runtime-dom): ensure customElement handles empty props correctly. fix Scoped attribute in Vue file affects the use of web component #6163 --- .../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 e29c36123f3..11669330368 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 eabe83b6b9f..d77daae8f1e 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) : []