Jelajahi Sumber

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

fix Scoped attribute in Vue file affects the use of web component #6163,#6895
Thorsten Lünborg 3 tahun lalu
induk
melakukan
f67bb500b6

+ 14 - 0
packages/runtime-dom/__tests__/customElement.spec.ts

@@ -210,6 +210,20 @@ describe('defineCustomElement', () => {
       customElements.define('my-el-upgrade', E)
       customElements.define('my-el-upgrade', E)
       expect(el.shadowRoot.innerHTML).toBe(`foo: hello`)
       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', () => {
   describe('emits', () => {

+ 1 - 1
packages/runtime-dom/src/apiCustomElement.ts

@@ -215,7 +215,7 @@ export class VueElement extends BaseClass {
     }).observe(this, { attributes: true })
     }).observe(this, { attributes: true })
 
 
     const resolve = (def: InnerComponentDef) => {
     const resolve = (def: InnerComponentDef) => {
-      const { props, styles } = def
+      const { props = {}, styles } = def
       const hasOptions = !isArray(props)
       const hasOptions = !isArray(props)
       const rawKeys = props ? (hasOptions ? Object.keys(props) : props) : []
       const rawKeys = props ? (hasOptions ? Object.keys(props) : props) : []