Changing 'a' element into a 'button' on hydration - best practices? | Astro Lounge | Page 1

I'm looking for a "correct/smart" way to turn a <a href...> element into a <button> without causing a layout shift when javascript hydrates. I'm doing it in svelte if that matters. I initially just replaced <a> with <button> when element mounted but that's not ideal. Should I just hijack and modify the <a> like below and maybe add role="button"?

<a href="/contact" class="contact" bind:this={button} on:click={(e) => {
    e.preventDefault();
    // dostuff
  }}
>```

The desired functionality is that I have a working link into a contact page, but when/if the page hydrates it's going to cause a chat window to pop up.

#Changing 'a' element into a 'button' on hydration - best practices?