From 27b5c71944637bc04d715382851cc63ca7efc47a Mon Sep 17 00:00:00 2001
From: likui <2218301630@qq.com>
Date: Tue, 14 Apr 2020 00:13:37 +0800
Subject: [PATCH] fix(runtime-dom): should patch svg innerHtml (#956)

---
 .../runtime-dom/__tests__/patchProps.spec.ts     | 16 ++++++++++++++++
 packages/runtime-dom/src/patchProp.ts            | 16 +++++++++++-----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts
index 96f3037cf13..ce30f91162f 100644
--- a/packages/runtime-dom/__tests__/patchProps.spec.ts
+++ b/packages/runtime-dom/__tests__/patchProps.spec.ts
@@ -45,6 +45,22 @@ describe('runtime-dom: props patching', () => {
     expect(fn).toHaveBeenCalled()
   })
 
+  // #954
+  test('(svg) innerHTML unmount prev children', () => {
+    const fn = jest.fn()
+    const comp = {
+      render: () => 'foo',
+      unmounted: fn
+    }
+    const root = document.createElement('div')
+    render(h('div', null, [h(comp)]), root)
+    expect(root.innerHTML).toBe(`<div>foo</div>`)
+
+    render(h('svg', { innerHTML: '<g></g>' }), root)
+    expect(root.innerHTML).toBe(`<svg><g></g></svg>`)
+    expect(fn).toHaveBeenCalled()
+  })
+
   test('textContent unmount prev children', () => {
     const fn = jest.fn()
     const comp = {
diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
index 71d64155517..4543bd1a54d 100644
--- a/packages/runtime-dom/src/patchProp.ts
+++ b/packages/runtime-dom/src/patchProp.ts
@@ -3,7 +3,7 @@ import { patchStyle } from './modules/style'
 import { patchAttr } from './modules/attrs'
 import { patchDOMProp } from './modules/props'
 import { patchEvent } from './modules/events'
-import { isOn, isString } from '@vue/shared'
+import { isOn, isString, isFunction } from '@vue/shared'
 import { RendererOptions } from '@vue/runtime-core'
 
 const nativeOnRE = /^on[a-z]/
@@ -34,10 +34,16 @@ export const patchProp: RendererOptions<Node, Element>['patchProp'] = (
           patchEvent(el, key, prevValue, nextValue, parentComponent)
         }
       } else if (
-        !isSVG &&
-        key in el &&
-        // onclick="foo" needs to be set as an attribute to work
-        !(nativeOnRE.test(key) && isString(nextValue))
+        isSVG
+          ? // most keys must be set as attribute on svg elements to work
+            // ...except innerHTML
+            key === 'innerHTML' ||
+            // or native onclick with function values
+            (key in el && nativeOnRE.test(key) && isFunction(nextValue))
+          : // for normal html elements, set as a property if it exists
+            key in el &&
+            // except native onclick with string values
+            !(nativeOnRE.test(key) && isString(nextValue))
       ) {
         patchDOMProp(
           el,