Vue version

3.3.8

Link to minimal reproduction

https://play.vuejs.org/#eNqNUs1OwzAMfpUQDmzS1qrbTlOpBGgHOABiHHOpWq/tSJMqScekqu+Ok7brEAxx8/cT27Hd0Luq8g410DUNdaKKyhANpq4iJoqyksqQB1lWZKdkSW483wJrv2Ei9Ds/OhEYKCseG0BESGhtLsI4DyILg9DHqOeu5vMwX0RBYNlFRObzQRnykOs4jnsS6bQ4RKvVKvRt0Fv97zVdbxfLL/5R/pTiLDWdUaMTKXZF5u21FDinxnoZTdBbcFAvlSmk0IyuiVOsFnMuP58cZ1QNs4FPckg+fuH3+mg5Rl8VaFAHYPSkmVhlYDp5s32GI8YnsZRpzdH9h/gGWvLa9tjZ7muRYttnPtfto9t2IbJ3vTkaEHr4lG3UOlvnZxS3b8d06etju0tv6d4x0eIUh8v5eWiKCRywRsylIbckhV0hYItAT6ZWHS8NgSPGzSPqz6MLu403jUvmYaq45mYy9TiIzOSkbbs76J511+QqjAtvvwCppvub

Steps to reproduce

run

What is expected?

The value of Comp2 should be 1

What is actually happening?

The value of Comp2 is 2

System Info

No response

Any additional comments?

No response

This problem does not occur in production mode, because Vue compiler will delete comment nodes in production mode.

Comment nodes are allowed as valid child elements. Although they don't affect the rendering of the component's default slot, they might lead to confusion when users check for the presence of the default slot using the useSlots API (related issue #7699).

The issue with inconsistent results in slot.default().length in the provided minimal reproduction is caused by different handling of comment nodes when passed into the default slot of a component in packages/compiler-core/src/transforms/vSlot.ts. This behavior depends on whether <template v-slot> is present or not (in L325, L342):

https://github.com/vuejs/core/blob/1c525f75a3d17a6356d5f66765623c0ae7c0ebcc/packages/compiler-core/src/transforms/vSlot.ts#L323-L344

Deciding on changes to how comment nodes are handled in slots, requires further discussion and work. If you need to check whether there is actual content rendered in the default slot using useSlots, you can use the following workarounds:

1. Remove comment nodes to avoid interference.
2. Filter out comment nodes when checking, as below:

<script setup>
import { useSlots, Comment } from 'vue';
const foo = useSlots()
  .default()
  .filter((i) => i.type !== Comment);
</script>

Hope this helps.

Comment nodes are allowed as valid child elements. Although they don't affect the rendering of the component's default slot, they might lead to confusion when users check for the presence of the default slot using the useSlots API (related issue #7699).

The issue with inconsistent results in slot.default().length in the provided minimal reproduction is caused by different handling of comment nodes when passed into the default slot of a component in packages/compiler-core/src/transforms/vSlot.ts. This behavior depends on whether <template v-slot> is present or not (in L325, L342):

https://github.com/vuejs/core/blob/1c525f75a3d17a6356d5f66765623c0ae7c0ebcc/packages/compiler-core/src/transforms/vSlot.ts#L323-L344

Deciding on changes to how comment nodes are handled in slots, requires further discussion and work. If you need to check whether there is actual content rendered in the default slot using useSlots, you can use the following workarounds:

1. Remove comment nodes to avoid interference.
2. Filter out comment nodes when checking, as below:

<script setup>
import { useSlots, Comment } from 'vue';
const hasDefaultSlot = useSlots()
  .default()
  .filter((i) => i.type !== Comment);
</script>

Hope this helps.

Weird, not to be exaggerated things, but I need to filter them out