Pass slot content as property or prerender custom components?

[Readf0x]

I'm currently working on adding copy link buttons to all headers (just like github does it) The way I have it set up would be perfect, but I'm using sveltekit for my app, and the SSR > Hydration > CSR process completely breaks the heading links, since bind:this doesn't run during SSR.
For reference, here's the current h1 component:

<!-- h1.svelte -->
<script lang="ts">
  import link from "$lib/icons/link.svg?raw";

  let data: HTMLElement;
  let id: string;
  $: id = data?.innerText
    .toLowerCase()
    .replaceAll(" ", "-")
    .replace(/[^a-z\-]/g, "");
</script>

<h2 bind:this={data} {id}>
  <slot /><button
    on:click={() =>
      navigator.clipboard.writeText(window.location.href.replace(/#.*$/, "") + "#" + id)}
    >
      {@html link}
    </button
  >
</h2>

The main issue is that on page load, the heading doesn't have an id, since the ids are generated after the component is bound. There are many issues with this besides links not working. Running this during CSR could easily cause lag spikes during page load if there are enough headers on a page. (Unlikely, but still.) I'm completely at a loss to be honest with you. The only thing I can think of that could maybe fix this is creating custom preprocessor. Any ideas?