fix(customElement): handle hyphenated prop pass to custom element

packages/runtime-dom/__tests__/customElement.spec.ts

@@ -223,6 +223,21 @@ describe('defineCustomElement', () => {
       expect(e.getAttribute('baz-qux')).toBe('four')
     })
 
+    test('props via hyphen property', async () => {
+      const Comp = defineCustomElement({
+        props: {
+          fooBar: Boolean,
+        },
+        render() {
+          return 'Comp'
+        },
+      })
+      customElements.define('my-el-comp', Comp)
+      render(h('my-el-comp', { 'foo-bar': true }), container)
+      const el = container.children[0]
+      expect((el as any).outerHTML).toBe('<my-el-comp foo-bar=""></my-el-comp>')
+    })
+
     test('attribute -> prop type casting', async () => {
       const E = defineCustomElement({
         props: {

packages/runtime-dom/src/modules/props.ts

@@ -1,5 +1,5 @@
 import { DeprecationTypes, compatUtils, warn } from '@vue/runtime-core'
-import { includeBooleanAttr } from '@vue/shared'
+import { camelize, includeBooleanAttr } from '@vue/shared'
 import { unsafeToTrustedHTML } from '../nodeOps'
 
 // functions. The user is responsible for using them with only trusted content.
@@ -95,7 +95,7 @@ export function patchDOMProp(
   // some properties has getter, no setter, will error in 'use strict'
   // eg. <select :type="null"></select> <select :willValidate="null"></select>
   try {
-    el[key] = value
+    el[camelize(key)] = value
   } catch (e: any) {
     // do not warn if value is auto-coerced from nullish values
     if (__DEV__ && !needRemove) {

packages/runtime-dom/src/patchProp.ts

@@ -3,7 +3,13 @@ import { patchStyle } from './modules/style'
 import { patchAttr } from './modules/attrs'
 import { patchDOMProp } from './modules/props'
 import { patchEvent } from './modules/events'
-import { isFunction, isModelListener, isOn, isString } from '@vue/shared'
+import {
+  camelize,
+  isFunction,
+  isModelListener,
+  isOn,
+  isString,
+} from '@vue/shared'
 import type { RendererOptions } from '@vue/runtime-core'
 import type { VueElement } from './apiCustomElement'
 
@@ -127,8 +133,8 @@ function shouldSetAsProp(
   if (isNativeOn(key) && isString(value)) {
     return false
   }
-
-  if (key in el) {
+  // if el is a Vue custom element, it should be passed as a prop.
+  if (camelize(key) in el) {
     return true
   }