fix(runtime-dom): patch xlink attribute (#842)

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)
+  })
+})

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)
     }