Javascript causing strange Custom Button behaviour

[dreamstar-enterprises]

Astro Info

5.1.1

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I have a custom button:

<Tag class={allClasses} {...rest}>

  <!--text-->
  <slot name="icon-left" />
  {text}
  <slot name="icon-right" />

  <!--image-->
  <span class="relative inline-flex items-center">
    <Chevron
      class={`ms-0.25 h-4 w-4 -rotate-90 stroke-[2.5] ${
        textColor.replace('text-', 'stroke-')
      } ${
        hoverTextColor.replace('text-', 'stroke-')
      } transition-all duration-100 group-hover:opacity-0`}
    />
    <Arrow
      class={`absolute start-0 ms-[4px] h-4 w-4 -rotate-90 stroke-[2.5] ${
        textColor.replace('text-', 'stroke-')
      } ${
        hoverTextColor.replace('text-', 'stroke-')
      } transition-all duration-100 opacity-0 group-hover:opacity-100`}
    />
  </span>
</Tag>

I have three instances of it on a page.

Here is one of them. Note this has a different id to the other 2 instances

      <Link
            id="back-home-link"
            href=""
            as="a"
            variant="solid"
            text="Back to Home"
            textColor="text-theme-selected-button-text"
            hoverTextColor="hover:text-white"
            hoverBgColor="hover:bg-rose-500"
            bgColor="bg-zinc-300"
            size="md"
          />

I have some javascript that does this:

  const elements = {
    backLink: document.getElementById(
      "back-home-link",
    ) as HTMLAnchorElement | null,
  };
  if (elements.backLink) {
    elements.backLink.textContent = t("auth.error.backHome");
  }

But doing this, for some reason causes the Arrow part to disappear on the ALL 3 buttons.

    <Arrow
      class={`absolute start-0 ms-[4px] h-4 w-4 -rotate-90 stroke-[2.5] ${
        textColor.replace('text-', 'stroke-')
      } ${
        hoverTextColor.replace('text-', 'stroke-')
      } transition-all duration-100 opacity-0 group-hover:opacity-100`}
    />

I know it is this one line causing the issue

elements.backLink.textContent = t("auth.error.backHome");

If I comment it out, the arrows on ALL 3 buttons reappear,

The html actually shows the Arrow svg to be there, on the other 2 buttons (and rightly not on the button I am targetting, since the JS replaces the textContent), but it says that the shadow root is closed, with nothing inside it

Uncommenting that line of js, causes the shadow root on the other 2 buttons, to have arrow svg inside it.

Not sure what might be going on?

What's the expected result?

This JS, should only affect the text content of the button being targetted, by id, not the other instances of the custom astro button

  const elements = {
    backLink: document.getElementById(
      "back-home-link",
    ) as HTMLAnchorElement | null,
  };
  if (elements.backLink) {
    elements.backLink.textContent = t("auth.error.backHome");
  }


### Link to Minimal Reproducible Example

seeabove minmal reproducible example

### Participation

- [ ] I am willing to submit a pull request for this issue.

[dreamstar-enterprises]

I modified the component and JS

  <!--text-->
  <slot name="icon-left" />
  <span class="link-text">{text}</span>
  <slot name="icon-right" />

const elements = {
   backLink: document
     .getElementById("back-home-link")
     ?.querySelector(".link-text"),
   backLinkAnchor: document.getElementById(
     "back-home-link",
   ) as HTMLAnchorElement | null,
 };

 if (elements.backLink) {
   elements.backLink.textContent = t("auth.error.backHome");
 }
 if (elements.backLinkAnchor) {
   elements.backLinkAnchor.href = `${import.meta.env.BASE_URL}/${locale}/`;
 }

It worked.

Strange behaviour before though

[martrapp]

Hi @dreamstar-enterprises, happy you found a solution!
That was really a strange behavior.