fix quote decoding for templates retrieved from innerHTML (fix vuejs#3403)

Author: yyx990803

src/compiler/codegen/index.js

@@ -28,7 +28,6 @@ export function generate (
   dataGenFns = pluckModuleFunction(options.modules, 'genData')
   platformDirectives = options.directives || {}
   const code = ast ? genElement(ast) : '_h("div")'
-  // console.log(code)
   staticRenderFns = prevStaticRenderFns
   return {
     render: `with(this){return ${code}}`,

src/compiler/parser/html-parser.js

@@ -51,12 +51,13 @@ const reCache = {}
 const ampRE = /&/g
 const ltRE = /</g
 const gtRE = />/g
+const quoteRE = /"/g
 
 function decodeAttr (value, shouldDecodeTags) {
   if (shouldDecodeTags) {
     value = value.replace(ltRE, '<').replace(gtRE, '>')
   }
-  return value.replace(ampRE, '&')
+  return value.replace(ampRE, '&').replace(quoteRE, '"')
 }
 
 export function parseHTML (html, options) {

src/platforms/web/util/index.js

@@ -11,8 +11,10 @@ export const isIE = UA && /msie|trident/.test(UA)
 export const isIE9 = UA && UA.indexOf('msie 9.0') > 0
 export const isAndroid = UA && UA.indexOf('android') > 0
 
-// some browsers, e.g. PhantomJS, encodes angular brackets
-// inside attribute values when retrieving innerHTML.
+// According to
+// https://w3c.github.io/DOM-Parsing/#dfn-serializing-an-attribute-value
+// when serializing innerHTML, <, >, ", & should be encoded as entities.
+// However, only some browsers, e.g. PhantomJS, encodes < and >.
 // this causes problems with the in-browser parser.
 export const shouldDecodeTags = inBrowser ? (function () {
   const div = document.createElement('div')

test/unit/features/component/component-slot.spec.js

@@ -384,7 +384,6 @@ describe('Component slot', () => {
         }
       }
     }).$mount()
-    console.log(vm.$el.innerHTML)
     expect(vm.$el.querySelector('.default').textContent).toBe('foo')
     expect(vm.$el.querySelector('.named').textContent).toBe('')
   })

test/unit/features/options/el.spec.js

@@ -66,12 +66,14 @@ describe('Options el', () => {
     expect(vm.$el.childNodes[1].childNodes[0].childNodes[0].namespaceURI).toContain('svg')
   })
 
-  it('properly encode attribute values', function () {
+  // https://w3c.github.io/DOM-Parsing/#dfn-serializing-an-attribute-value
+  it('properly decode attribute values when parsing templates from DOM', function () {
     const el = document.createElement('div')
-    el.innerHTML = '<a href="/a?foo=bar&baz=qux" name="<abc>"></a>'
+    el.innerHTML = '<a href="/a?foo=bar&baz=qux" name="<abc>" single=\'"hi"\'></a>'
     const vm = new Vue({ el })
     expect(vm.$el.children[0].getAttribute('href')).toBe('/a?foo=bar&baz=qux')
     expect(vm.$el.children[0].getAttribute('name')).toBe('<abc>')
+    expect(vm.$el.children[0].getAttribute('single')).toBe('"hi"')
   })
 
   it('warn cannot find element', () => {