Version

3.0.0

Reproduction link

https://codesandbox.io/s/cranky-bush-u5qs8?fontsize=14&hidenavigation=1&theme=dark

Steps to reproduce

There is a simple example, you just need to check the elements on the dev tool.

What is expected?

Default values should be used for invalid content.

What is actually happening?

Any content prevents using default value, also a comment.

It'd be inconsistent between builds too as production builds strip out comments:

vue.global.js: https://jsfiddle.net/skirtle/q78raL1z/1/ vue.global.prod.js: https://jsfiddle.net/skirtle/q78raL1z/

It doesn't work when I want to multiple pass slot between components.

<!-- foo.vue -->
<template>
  <div class="foo">
    <slot :value="value"> current value: {{ value }} </slot>
    <button @click="value += 1">Add</button>
  </div>
</template>

<!-- baz.vue -->
<template>
  <div class="baz">
    <Foo>
      <template #default="{ value }">
        <slot :value="value"></slot>
      </template>
    </Foo>
  </div>
</template>

<!-- App.vue -->
<template>
  <!-- render default value -->
  <Foo></Foo>
  <!-- slot default value not render -->
  <Baz></Baz>
  <!-- render customized value -->
  <Baz>
    <template #default="{ value }">
      customized value: {{ value + 10 }}
    </template>
  </Baz>
</template>

This usage will be used in secondary packaging.

Reproduction link

https://codesandbox.io/s/vigilant-leakey-9bhyv?fontsize=14&hidenavigation=1&theme=dark