alpine inside a snipcart template

[fredbouin]

I'm trying to figure out why alpine doesn't work inside a Snipcart custom template.
https://docs.snipcart.com/v3/ ... https://demo.snipcart.com/

Snipcart creates and destroys itself on clicking the "add to cart" button, so on page load the cart is not existant until you interact with it. Which means any alpine inside my snipcart template wouldn't exist on initial page load. You can see this happen when you inspect the demo, the <div id="snipcart"> at the bottom of the page is empty until you click add to cart.

Wondering if this is why alpine is only partially working inside snipcart.

I'm testing with snippets from the alpine docs, some things seem to work and others don't...

This works:

<div x-data="{ title: 'hello' }">
    <h1 x-text="title"></h1>
</div>

But this doesn't work (if I set open to true 'content' becomes visible, but either way the click interaction doesn't work):

<div x-data="{ open: false }">
    <button @click="open = ! open">Expand</button>
    <div x-show="open">
        Content...
    </div>
</div>

this works:

<button @click="$el.remove()">Remove Text</button>

This doesn't work:

<button @click="$refs.text.remove()">Remove Text</button>
<span x-ref="text">Hello 👋</span>