I am embedding a svelte-stripe CardNumber element inside of a shadcn-svelte Accordion. Relevant docs:

• shadcn-svelte Accordion: https://www.shadcn-svelte.com/docs/components/accordion
  • bits-ui underlying Accordion: https://www.bits-ui.com/docs/components/accordion
• svelte-stripe CardNumber: https://www.sveltestripe.com/#credit-cards

When the nested AccordionContent that contains the CardNumber is closed, we lose the ref to the CardNumber (I think because it is removed from the DOM), so if the user backs up in the Accordion Flow, the value of the CardNumber is null.

How can I preserve the value of the CardNumber? I found this tricky to do given the nature of the Stripe API and the Accordion component.

<script lang="ts">
  let cardElement: StripeCardNumberElement;
</script>

<AccordionItem value="card">
  <AccordionTrigger>Card</AccordionTrigger>
  <AccordionContent>   
    <div>
      <CardNumber
        on:change={handleCardNumber}
        bind:element={cardElement}
        style={stripeStyle} />
    </div>
   </AccordionContent>
</AccordionItem>