Refactor hydration markers: Use data-attributes instead of polluting the DOM with comment nodes

[tmvc03]

The current SSR/hydration mechanism in Svelte (especially noticeable in Svelte 5) heavily relies on inserting empty or structured comment nodes (like , ) into the DOM to keep track of dynamic blocks, lists, and conditionals.

While this works from a functional standpoint, it severely impacts the developer experience (DX). Inspecting the DOM in Browser DevTools becomes incredibly cluttered, making it difficult to read the actual semantic HTML structure. In large applications with complex lists or deeply nested components, the amount of comment nodes sometimes matches or exceeds the number of actual DOM elements.

Describe the solution you'd like
I would like to propose replacing comment-based hydration markers with a more elegant approach, such as using specific data-* attributes on existing DOM elements, or at least minimizing the footprint of these markers.

For example, instead of wrapping a block like this:

<div class="user-card">
  John Doe</div>

We could attach hydration metadata directly to the parent or specific elements:

<div class="user-card" data-sv-hydrate="...">
  John Doe
</div>

If a virtual boundaries-only marker is absolutely required (e.g., for text nodes or fragments without a wrapper), a single descriptive data-attributed element or a more compact approach could be used, rather than scattering open/close comments everywhere.

Describe alternatives you've considered

• Keeping comments but stripping them in a specific "DevTools clean mode" (likely hard to implement on the browser side).
• Accepting the DOM pollution, which hurts the original Svelte promise of outputting clean, minimal HTML.

Additional context
Frameworks like Vue and Nuxt have historically managed to keep their hydration footprint relatively clean, and moving towards standard HTML5 data- attributes feels more robust, modern, and friendly for developers who spend a lot of time in the elements panel.