diff --git a/packages/runtime-dom/__tests__/modules/attrs.spec.ts b/packages/runtime-dom/__tests__/modules/attrs.spec.ts new file mode 100644 index 00000000..91d59888 --- /dev/null +++ b/packages/runtime-dom/__tests__/modules/attrs.spec.ts @@ -0,0 +1,27 @@ +import { patchAttr, xlinkNS } from '../../src/modules/attrs' + +describe('attrs', () => { + test('xlink attributes', () => { + const el = document.createElementNS('http://www.w3.org/2000/svg', 'use') + patchAttr(el, 'xlink:href', 'a', true) + expect(el.getAttributeNS(xlinkNS, 'href')).toBe('a') + patchAttr(el, 'xlink:href', null, true) + expect(el.getAttributeNS(xlinkNS, 'href')).toBe(null) + }) + + test('boolean attributes', () => { + const el = document.createElement('input') + patchAttr(el, 'readonly', true, false) + expect(el.getAttribute('readonly')).toBe('') + patchAttr(el, 'readonly', false, false) + expect(el.getAttribute('readonly')).toBe(null) + }) + + test('attributes', () => { + const el = document.createElement('div') + patchAttr(el, 'id', 'a', false) + expect(el.getAttribute('id')).toBe('a') + patchAttr(el, 'id', null, false) + expect(el.getAttribute('id')).toBe(null) + }) +}) diff --git a/packages/runtime-dom/src/modules/attrs.ts b/packages/runtime-dom/src/modules/attrs.ts index 2a6c5cc7..10fe06af 100644 --- a/packages/runtime-dom/src/modules/attrs.ts +++ b/packages/runtime-dom/src/modules/attrs.ts @@ -1,6 +1,6 @@ import { isSpecialBooleanAttr } from '@vue/shared' -const xlinkNS = 'http://www.w3.org/1999/xlink' +export const xlinkNS = 'http://www.w3.org/1999/xlink' export function patchAttr( el: Element, @@ -10,7 +10,7 @@ export function patchAttr( ) { if (isSVG && key.indexOf('xlink:') === 0) { if (value == null) { - el.removeAttributeNS(xlinkNS, key) + el.removeAttributeNS(xlinkNS, key.slice(6, key.length)) } else { el.setAttributeNS(xlinkNS, key, value) }