From: Thorsten Luenborg <t.luenborg@googlemail.com>
Date: Thu, 24 Feb 2022 20:57:27 +0000 (+0100)
Subject: fix: ensure element attribute names are always hyphenated
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F5482%2Fhead;p=thirdparty%2Fvuejs%2Fcore.git

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 b78dd44c63..514132d2c4 100644
--- 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 a80936345e..a7ea7d043f 100644
--- 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)
     }
   }
 }