SSR generated html is different, and wrong, compared to client generated.

[arggh]

Describe the bug

I have an Eleventy site that uses Svelte as it's template engine. I have an option flag to disable the client side JS bundle, which lead to me noticing that the UI is broken in some cases when only using the SSR'd version.

DOM elements are not rendered in correct places. It's hard to reproduce with the REPL since the bug is only apparent in the SSR version, so I took some screenshots of the generated html:

SSR:

(watch out for the duplicated <a> element)

Client:

The client version is correctly rendered, but the SSR version is not. It somehow duplicates the <a> element and misplaces other element.

The code for this specific component is here:

<script>
  import Datestamp from './Datestamp.svelte';
  import Pill from './Pill.svelte';

  export let publishedAt;
  export let slug;
  export let title;
  export let tags = [];
</script>

<div>
  <a href="/blogi/{slug.current}" class="block md:flex hover:bg-secondary-100 p-3">
    <div class="text-tertiary-400">
      <Datestamp {publishedAt}/>
    </div>
    <div class="content ml-4 flex flex-col">
      <h3 class="text-2xl lg:text-3xl font-extrabold text-secondary-800">{title}</h3>
      <div class="mt-auto">
        <div class="mt-4">
          {#each tags as tag}
            <Pill href="/tagit/{tag}">{tag}</Pill>
          {/each}
        </div>
      </div>
    </div>
  </a>
</div>

To Reproduce

I made a REPL of another component in our site that suffered from the same problem: https://svelte.dev/repl/1c9a6d3326674f85b0b5246e209bf350?version=3.29.7

However, since it's only happening in SSR, you can't really see the issue in the REPL.

Expected behavior
I expected the SSR version to match the client version in DOM structure.

Information about your Svelte project:
To make your life easier, just run npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers and paste the output here.

• Your browser and the version: latest Chrome

• Your operating system: Mac Os Mojave

• Svelte version: 3.29.7

• Rollup

Severity
Severe, out site is supposed to be a static site with only small amounts of JS sprinkled on top, so with this bug, I cannot use Svelte reliably.

[arggh]

Seems like the problem was caused by nested <a> -elements. When nesting anchor tags, by mistake obviously, SSR bundle creates a different structure of DOM elements than the client bundle.

To close or not to close?

[Conduitry]

There's already an old issue for this sort of thing - #1686 - so closing this one.