fix(runtime-dom): ensure customElement handles empty props correctly. (#6182)

fix Scoped attribute in Vue file affects the use of web component #6163,#6895

diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index 300cc2322cec127a749e3ab63741f6b2490a6c1c..dd087ad279d38c13be192b68ebb0957c5ddb89f2 100644 (file)
--- 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('"<div>foo</div>"')
+    })
   })
 
   describe('emits', () => {

diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index 5ff45d652f2100230effce8be10065d47bd26497..32beffe126acca7ea647012fadb2201b9551ba5a 100644 (file)
--- 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) : []