use innerHTML from template nodes for consistent behavior across browesrs (fix #2805)

Author: yyx990803

src/parsers/template.js

@@ -142,10 +142,12 @@ function stringToFragment (templateString, raw) {
 
 function nodeToFragment (node) {
   // if its a template tag and the browser supports it,
-  // its content is already a document fragment.
+  // its content is already a document fragment. However, iOS Safari has
+  // bug when using directly cloned template content with touch
+  // events and can cause crashes the nodes are removed from DOM, so we have
+  // to treat template elements as string templates. (#2805)
   if (isRealTemplate(node)) {
-    trimNode(node.content)
-    return node.content
+    return stringToFragment(node.innerHTML)
   }
   // script template
   if (node.tagName === 'SCRIPT') {

test/unit/specs/parsers/template_spec.js

@@ -9,16 +9,6 @@ describe('Template Parser', function () {
     expect(res).toBe(frag)
   })
 
-  it('should return content if argument is a valid template node', function () {
-    var templateNode = document.createElement('template')
-    if (!templateNode.content) {
-      // mock the content
-      templateNode.content = document.createDocumentFragment()
-    }
-    var res = parse(templateNode)
-    expect(res).toBe(templateNode.content)
-  })
-
   it('should parse if argument is a template string', function () {
     var res = parse(testString)
     expect(res.nodeType).toBe(11)
@@ -50,6 +40,15 @@ describe('Template Parser', function () {
     expect(res.firstChild.nodeValue).toBe('')
   })
 
+  it('should parse innerHTML if argument is a template node', function () {
+    var templateNode = document.createElement('template')
+    templateNode.innerHTML = testString
+    var res = parse(templateNode)
+    expect(res.nodeType).toBe(11)
+    expect(res.childNodes.length).toBe(2)
+    expect(res.querySelector('.test').textContent).toBe('world')
+  })
+
   it('should parse textContent if argument is a script node', function () {
     var node = document.createElement('script')
     node.textContent = testString