should fallback on default slot if no content is left (vuejs#1965)

yyx990803 · yyx990803 · commit 9edb3582b18f · 2015-12-09T12:06:03.000-05:00
diff --git a/src/directives/element/slot.js b/src/directives/element/slot.js
@@ -35,11 +35,12 @@ export default {
       // Default content
       var self = this
       var compileDefaultContent = function () {
-        self.compile(
-          extractFragment(raw.childNodes, raw, true),
-          context,
-          host
-        )
+        var content = extractFragment(raw.childNodes, raw, true)
+        if (content.hasChildNodes()) {
+          self.compile(content, context, host)
+        } else {
+          self.fallback()
+        }
       }
       if (!host._isCompiled) {
         // defer until the end of instance compilation,
diff --git a/test/unit/specs/directives/element/slot_spec.js b/test/unit/specs/directives/element/slot_spec.js
@@ -59,6 +59,17 @@ describe('Slot Distribution', function () {
     expect(el.lastChild.textContent).toBe('slot b')
   })
 
+  it('fallback content with mixed named/unnamed slots', function () {
+    el.innerHTML = '<p slot="b">slot b</p>'
+    options.template =
+      '<slot><p>fallback a</p></slot>' +
+      '<slot name="b">fallback b</slot>'
+    mount()
+    expect(el.childNodes.length).toBe(2)
+    expect(el.firstChild.textContent).toBe('fallback a')
+    expect(el.lastChild.textContent).toBe('slot b')
+  })
+
   it('selector matching multiple elements', function () {
     el.innerHTML = '<p slot="t">1</p><div></div><p slot="t">2</p>'
     options.template = '<slot name="t"></slot>'
