fix: using .xx-xx underlined naming conventions when used by WebComponent is reactive #5687

Author: hcg1023

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

@@ -210,6 +210,27 @@ describe('defineCustomElement', () => {
       customElements.define('my-el-upgrade', E)
       expect(el.shadowRoot.innerHTML).toBe(`foo: hello`)
     })
+
+    // #5687
+    test('using .xx-xx underlined naming conventions when used by WebComponent is reactive', () => {
+      const E = defineCustomElement({
+        props: {
+          maxAge: Number
+        },
+        render() {
+          return `max age: ${this.maxAge}`
+        }
+      })
+      customElements.define('my-element-hyphenate', E)
+      const el = document.createElement('my-element-hyphenate') as any
+      el.setAttribute('max-age', 0)
+      container.appendChild(el)
+      expect(el.maxAge).toBe(0)
+      el.maxAge = 50
+      expect(el.maxAge).toBe(50)
+      el['max-age'] = 100
+      expect(el.maxAge).toBe(100)
+    })
   })
 
   describe('emits', () => {

packages/runtime-dom/src/apiCustomElement.ts

@@ -241,14 +241,10 @@ export class VueElement extends BaseClass {
 
       // defining getter/setters on prototype
       for (const key of rawKeys.map(camelize)) {
-        Object.defineProperty(this, key, {
-          get() {
-            return this._getProp(key)
-          },
-          set(val) {
-            this._setProp(key, val)
-          }
-        })
+        this._defineElementProperty(key)
+        if (hyphenate(key) !== key) {
+          this._defineElementProperty(hyphenate(key), key, false)
+        }
       }
 
       // apply CSS
@@ -266,9 +262,27 @@ export class VueElement extends BaseClass {
     }
   }
 
+  private _defineElementProperty(
+    key: string,
+    originalKey = key,
+    shouldReflect = true
+  ) {
+    Object.defineProperty(this, key, {
+      get() {
+        return this._getProp(originalKey)
+      },
+      set(val) {
+        this._setProp(originalKey, val, shouldReflect)
+      }
+    })
+  }
+
   protected _setAttr(key: string) {
     let value = this.getAttribute(key)
-    if (this._numberProps && this._numberProps[key]) {
+    if (
+      this._numberProps &&
+      (this._numberProps[key] || this._numberProps[camelize(key)])
+    ) {
       value = toNumber(value)
     }
     this._setProp(camelize(key), value, false)