fix: ensure element attribute names are always hyphenated

diff --git a/packages/runtime-dom/__tests__/patchAttrs.spec.ts b/packages/runtime-dom/__tests__/patchAttrs.spec.ts
index b78dd44c634ea917c3d46ac5763552e9c402977f..514132d2c4a9e9cea12fce2735c8dfe080a1d15e 100644 (file)
--- a/packages/runtime-dom/__tests__/patchAttrs.spec.ts
+++ b/packages/runtime-dom/__tests__/patchAttrs.spec.ts
@@ -53,4 +53,12 @@ describe('runtime-dom: attrs patching', () => {
     patchProp(el, 'onwards', 'a', null)
     expect(el.getAttribute('onwards')).toBe(null)
   })
+
+  test('camelCase attribute name properly hyphenated', () => {
+    const el = document.createElement('div')
+    patchProp(el, 'customAttribute', null, 'a')
+    expect(el.getAttribute('custom-attribute')).toBe('a')
+    patchProp(el, 'custom-attribute', 'a', null)
+    expect(el.getAttribute('custom-attribute')).toBe(null)
+  })
 })

diff --git a/packages/runtime-dom/src/modules/attrs.ts b/packages/runtime-dom/src/modules/attrs.ts
index a80936345ed130ad76b3d6ccf90c9a2b55caf475..a7ea7d043fba349a01cdc8e2e5cec44aff20d838 100644 (file)
--- a/packages/runtime-dom/src/modules/attrs.ts
+++ b/packages/runtime-dom/src/modules/attrs.ts
@@ -1,4 +1,5 @@
 import {
+  hyphenate,
   includeBooleanAttr,
   isSpecialBooleanAttr,
   makeMap,
@@ -36,7 +37,7 @@ export function patchAttr(
     if (value == null || (isBoolean && !includeBooleanAttr(value))) {
       el.removeAttribute(key)
     } else {
-      el.setAttribute(key, isBoolean ? '' : value)
+      el.setAttribute(hyphenate(key), isBoolean ? '' : value)
     }
   }
 }