🐛 BUG: Svelte element binding is broken when component used more than once

[LorenzoLeonardini]

What version of astro are you using?

0.23.7

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

Note: this bug report uses Svelte components because that's the only framework I know, feel free to test with React and friends (assuming they also have ways to "bind elements") and compare the results.

This is a "companion" issue of #2725. The following bug happens when using client:load, client:idle, client:visible.

Bug description
When a Svelte component binds an element using bind:this, and the component is used more than once, all the instances of the component share the binding value. What I mean is, if I have a component doing something like

<script>
import { onMount } from 'svelte'

export let content
let element

onMount(() => {
  element.innerHTML = content
})
</script>

<h1 bind:this={element}></h1>

and I add it to the page more than once

<Test content='Test 1' client:load />
<Test content='Test 2' client:load />
<Test content='Test 3' client:load />

the result is three titles with the same content. They either all are "Test 1" or "Test 2" or "Test 3", randomly on the refresh. What I assume is the cause is that every element variable point to the same HTML element in the DOM.
Interestingly, this happens only with element binds, something like <input bind:value={content}> works as expected.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-nejdnv-nidu66?file=src/pages/index.astro