From a23438ca7bd408d1a56046a4d329f36e75d28614 Mon Sep 17 00:00:00 2001 From: Thorsten Luenborg Date: Thu, 24 Feb 2022 21:57:27 +0100 Subject: [PATCH] fix: ensure element attribute names are always hyphenated --- packages/runtime-dom/__tests__/patchAttrs.spec.ts | 8 ++++++++ packages/runtime-dom/src/modules/attrs.ts | 3 ++- 2 files changed, 10 insertions(+), 1 deletion(-) 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) } } } -- 2.47.2