Custom elements and x-for issue

[TheSteveBurgess]

I’m seeing some strangeness around custom elements and x-for

Here’s a link to a codepen that demonstrates it - https://codepen.io/SteveBurgess/pen/oNmZwVR?editors=1111

Essentially, when I put a custom element within an x-for loop, changing the order the array that the loop is using causes the content within the custom element to get displayed again.

I’m sure I’m just missing something so any pointers would be great.

[ekwoka]

So, this is an issue in the sense that your connectedCallback here is not idempotent.

the connectedCallback is invoked every time the element is added to a document, NOT when the element is created.

So if Alpine moves the elements around, as it does with x-for, the element can get connected each time it moves.

Ideally, you should make your connectedCallback idempotent so calling it multiple times doesn't cause issues.

[TheSteveBurgess]

Ahh, ok that explains what i'm seeing :)

Thanks for the super quick reply!