fix content select logic (fix #936)

Author: yyx990803

src/compiler/content.js

@@ -18,40 +18,51 @@ module.exports = {
     var raw = contentOwner.$options._content
     var content
     if (!raw) {
-      // fallback content
-      // extract as a fragment
-      content = _.extractContent(this.el, true)
-      this.compile(content, vm)
+      this.fallback()
       return
     }
     var parent = contentOwner.$parent
     var selector = this.el.getAttribute('select')
     if (!selector) {
-      // default content
-      // Importent: clone the rawContent before extracting
-      // content because the <content> may be inside a v-if
-      // and need to be compiled more than once.
-      content = _.extractContent(raw.cloneNode(true), true)
-      this.compile(content, parent, vm)
+      // Default content
+      var self = this
+      var compileDefaultContent = function () {
+        self.compile(
+          extractFragment(raw.childNodes, raw, true),
+          contentOwner.$parent,
+          vm
+        )
+      }
+      if (!contentOwner._isCompiled) {
+        // defer until the end of instance compilation,
+        // because the default outlet must wait until all
+        // other possible outlets with selectors have picked
+        // out their contents.
+        contentOwner.$once('hook:compiled', compileDefaultContent)
+      } else {
+        compileDefaultContent()
+      }
     } else {
       // select content
       selector = vm.$interpolate(selector)
       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))
-          }
-        }
+        content = extractFragment(nodes, raw)
         if (content.hasChildNodes()) {
           this.compile(content, parent, vm)
+        } else {
+          this.fallback()
         }
+      } else {
+        this.fallback()
       }
     }
   },
 
+  fallback: function () {
+    this.compile(_.extractContent(this.el, true), this.vm)
+  },
+
   compile: function (content, owner, host) {
     if (content && owner) {
       this.unlink = owner.$compile(content, host)
@@ -68,5 +79,33 @@ module.exports = {
       this.unlink()
     } 
   }
+}
+
+/**
+ * Extract qualified content nodes from a node list.
+ *
+ * @param {NodeList} nodes
+ * @param {Element} parent
+ * @param {Boolean} main
+ * @return {DocumentFragment}
+ */
 
+function extractFragment (nodes, parent, main) {
+  var frag = document.createDocumentFragment()
+  for (var i = 0, l = nodes.length; i < l; i++) {
+    var node = nodes[i]
+    // if this is the main outlet, we want to skip all
+    // previously selected nodes;
+    // otherwise, we want to mark the node as selected.
+    // clone the node so the original raw content remains
+    // intact. this ensures proper re-compilation in cases
+    // where the outlet is inside a conditional block
+    if (main && !node.selected) {
+      frag.appendChild(node.cloneNode(true))
+    } else if (!main && node.parentNode === parent) {
+      node.selected = true
+      frag.appendChild(node.cloneNode(true))
+    }
+  }
+  return frag
 }

test/unit/specs/compiler/content_spec.js

@@ -47,7 +47,9 @@ describe('Content Transclusion', function () {
 
   it('fallback content with multiple select', function () {
     el.innerHTML = '<p class="b">select b</p>'
-    options.template = '<content select=".a"><p>fallback a</p></content><content select=".b">fallback b</content>'
+    options.template =
+      '<content select=".a"><p>fallback a</p></content>' +
+      '<content select=".b">fallback b</content>'
     mount()
     expect(el.childNodes.length).toBe(2)
     expect(el.firstChild.textContent).toBe('fallback a')
@@ -61,6 +63,16 @@ describe('Content Transclusion', function () {
     expect(el.innerHTML).toBe('<p class="t">1</p><p class="t">2</p>')
   })
 
+  it('default content should only render parts not selected', function () {
+    el.innerHTML = '<div>hi</div><p class="a">1</p><p class="b">2</p>'
+    options.template =
+      '<content select=".a"></content>' +
+      '<content></content>' +
+      '<content select=".b"></content>'
+    mount()
+    expect(el.innerHTML).toBe('<p class="a">1</p><div>hi</div><p class="b">2</p>')
+  })
+
   it('content transclusion with replace', function () {
     el.innerHTML = '<p>hi</p>'
     options.template = '<div><div><content></content></div></div>'
@@ -92,8 +104,14 @@ describe('Content Transclusion', function () {
   })
 
   it('select should only match children', function () {
-    el.innerHTML = '<p class="b">select b</p><span><p class="b">nested b</p></span><span><p class="c">nested c</p></span>'
-    options.template = '<content select=".a"><p>fallback a</p></content><content select=".b">fallback b</content><content select=".c">fallback c</content>'
+    el.innerHTML =
+      '<p class="b">select b</p>' +
+      '<span><p class="b">nested b</p></span>' +
+      '<span><p class="c">nested c</p></span>'
+    options.template =
+      '<content select=".a"><p>fallback a</p></content>' +
+      '<content select=".b">fallback b</content>' +
+      '<content select=".c">fallback c</content>'
     mount()
     expect(el.childNodes.length).toBe(3)
     expect(el.firstChild.textContent).toBe('fallback a')