Annotations have an impact on the length of the slot

[Lazydd]

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

[DragonnZhang]

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

[jh-leong]

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):

core/packages/compiler-core/src/transforms/vSlot.ts

Lines 323 to 344 in 1c525f7

	if (!hasTemplateSlots) {
	// implicit default slot (on component)
	slotsProperties.push(buildDefaultSlotProperty(undefined, children))
	} else if (
	implicitDefaultChildren.length &&
	// #3766
	// with whitespace: 'preserve', whitespaces between slots will end up in
	// implicitDefaultChildren. Ignore if all implicit children are whitespaces.
	implicitDefaultChildren.some(node => isNonWhitespaceContent(node))
	) {
	// implicit default slot (mixed with named slots)
	if (hasNamedDefaultSlot) {
	context.onError(
	createCompilerError(
	ErrorCodes.X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN,
	implicitDefaultChildren[0].loc
	)
	)
	} else {
	slotsProperties.push(
	buildDefaultSlotProperty(undefined, implicitDefaultChildren)
	)

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.

[Lazydd]

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):

core/packages/compiler-core/src/transforms/vSlot.ts

Lines 323 to 344 in 1c525f7

	if (!hasTemplateSlots) {
	// implicit default slot (on component)
	slotsProperties.push(buildDefaultSlotProperty(undefined, children))
	} else if (
	implicitDefaultChildren.length &&
	// #3766
	// with whitespace: 'preserve', whitespaces between slots will end up in
	// implicitDefaultChildren. Ignore if all implicit children are whitespaces.
	implicitDefaultChildren.some(node => isNonWhitespaceContent(node))
	) {
	// implicit default slot (mixed with named slots)
	if (hasNamedDefaultSlot) {
	context.onError(
	createCompilerError(
	ErrorCodes.X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN,
	implicitDefaultChildren[0].loc
	)
	)
	} else {
	slotsProperties.push(
	buildDefaultSlotProperty(undefined, implicitDefaultChildren)
	)

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