v-click doesn't work on a user-defined component in the build mode when the <template> part has a top-level comment

[whitphx]

Describe the bug

v-click doesn't work on a user-defined component in the build mode,
when the <template> part has a top-level comment like below,
while it works in the dev mode.

Hello.vue

<template>
  <!-- This top level comment causes the bug where the v-click on this component doesn't work in the build mode -->
  <div>Hello</div>
</template>

Hello2.vue

<template>
  <div>Hello2</div>
  <!-- The bug occurs even when the comment is placed here, after the element. -->
</template>

slides.md

<Hello v-click />
<Hello2 v-click />

Build mode (`slidev build`)	Dev mode (`slidev`)
CleanShot.2025-03-03.at.18.00.03.mp4 v-click doesn't work.	CleanShot.2025-03-03.at.18.02.41.mp4 v-click works.

These screenshots are from the repro repo: https://github.com/whitphx/slidev-vclick-problem-repro

Minimal reproduction

Repro repo: https://github.com/whitphx/slidev-vclick-problem-repro

Steps to reproduce the behavior:

1. Clone the repo
2. Build the slide: pnpm build
3. Serve the built slide: npx serve -s dist
4. Open the slide: open http://localhost:3000/

Environment

• Slidev version: 51.3.0
• Browser: Google Chrome, Version 133.0.6943.142 (Official Build) (arm64)
• OS: macOS, 15.3.1 (24D70)

[leochiu-a]

It seems like not a bug because using custom directives on components is not recommended. Especially when the component has multiple root elements.

https://vuejs.org/guide/reusability/custom-directives.html#usage-on-components