content selector should select all matching elements (fix part of #936)

Author: yyx990803

src/compiler/content.js

@@ -36,12 +36,18 @@ module.exports = {
     } else {
       // select content
       selector = vm.$interpolate(selector)
-      content = raw.querySelector(selector)
-      // only allow top-level select
-      if (content && content.parentNode === raw) {
-        // same deal, clone the node for v-if
-        content = content.cloneNode(true)
-        this.compile(content, parent, vm)
+      var nodes = raw.querySelectorAll(selector)
+      if (nodes.length) {
+        content = document.createDocumentFragment()
+        for (var i = 0, l = nodes.length; i < l; i++) {
+          // only allow top-level select
+          if (nodes[i].parentNode === raw) {
+            content.appendChild(nodes[i].cloneNode(true))
+          }
+        }
+        if (content.hasChildNodes()) {
+          this.compile(content, parent, vm)
+        }
       }
     }
   },

test/unit/specs/compiler/content_spec.js

@@ -54,6 +54,13 @@ describe('Content Transclusion', function () {
     expect(el.lastChild.textContent).toBe('select b')
   })
 
+  it('selector matching multiple elements', function () {
+    el.innerHTML = '<p class="t">1</p><div></div><p class="t">2</p>'
+    options.template = '<content select=".t"></content>'
+    mount()
+    expect(el.innerHTML).toBe('<p class="t">1</p><p class="t">2</p>')
+  })
+
   it('content transclusion with replace', function () {
     el.innerHTML = '<p>hi</p>'
     options.template = '<div><div><content></content></div></div>'