When two Link components are nested within each other, it reports "Hydration completed but contains mismatches."

[chiaweilee]

Describe the bug

When two Link components are nested within each other, it reports "Hydration completed but contains mismatches."
This error only occurs in the production environment.

Link.vue:

<template>
  <a>
    <slot />
  </a>
</template>

index.md

<Link><Link>Hydration completed but contains mismatches.</Link></Link>

Reproduction

https://stackblitz.com/edit/vite-4nxfvzn6?file=docs%2Findex.md

Expected behavior

I'm not sure why this happens, but it's quite hard to troubleshoot. It would be better if more explicit error messages could be provided.

System Info

Latest Chrome

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Because it is invalid HTML - https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element

Transparent, but there must be no interactive content descendant, a element descendant, or descendant with the tabindex attribute specified.

Regarding better errors, it is there while developing:

(Edit: sorry these are not there when you've invalid HTML across components, you'll need to enable DEBUG mode to see those in browser console in prod build).

If you want errors on prod build, you can run DEBUG=true vitepress build which will enable __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ flag.