Best practice to temporarily move a template element keeping its state

[FabienHenon]

Hi,

My use case is that I have a template element, let's say a button:

<template>
  <div><button @click="newState = 'foo'"></button></div>
</template>

And I would like to be able to temporarily move it inside another element.
Like x-teleport does but with a dynamic target. And if the target changes, the template moves to the new target (and is deleted from the previous one).

This template is located inside an Alpine element (x-data attribute set) and must be able to handle the scoped $data.

Inside my Alpine element I have several other elements, like this (full version):

<div x-data="{newState: null, currElt: null}">
  <div x-ref="elt1" @click="currElt = $refs.elt1">Element 1</div>
  <div x-ref="elt2" @click="currElt = $refs.elt2">Element 2</div>
  <div x-ref="elt3" @click="currElt = $refs.elt3">Element 3</div>
  <template x-move="currElt">
    <div><button @click="newState = 'foo'"></button></div>
  </template>
</div>

And when I click inside an element, the DOM should look like this (let's say I clicked on "Element 1"):

<div x-data="{newState: null, currElt: null}">
  <div x-ref="elt1" @click="currElt = $refs.elt1">
    Element 1
    <div><button @click="newState = 'foo'"></button></div>
  </div>
  <div x-ref="elt2" @click="currElt = $refs.elt2">Element 2</div>
  <div x-ref="elt3" @click="currElt = $refs.elt3">Element 3</div>
  <template x-move="currElt">
    <div><button @click="newState = 'foo'"></button></div>
  </template>
</div>

I know I could have the same result by copying the button into each element and handling their visibility separately like this:

<div x-data="{newState: null, currElt: null}">
  <div @click="currElt = 'elt1'">
    Element 1
    <div x-show="currElt == 'elt1'"><button @click="newState = 'foo'"></button></div>
  </div>
  <div @click="currElt = 'elt2'">
    Element 2
    <div x-show="currElt == 'elt2'"><button @click="newState = 'foo'"></button></div>
  </div>
  <div @click="currElt = 'elt3'">
    Element 3
    <div x-show="currElt == 'elt3'"><button @click="newState = 'foo'"></button></div>
  </div>
</div>

But I'll have a lot of elements coming from the user and I don't want to be duplicating this button into each element (furthermore, this won't be a simple button but something more complex).

Anything I could use in Alpine to do something similar?
Or do I have to write my own custom directive and handle the copy of the template myself?
If so, how can I keep the state of the template?
I see the x-teleport directive uses these functions:

let clone = el.content.cloneNode(true).firstElementChild
addScopeToNode(clone, {}, el)

Should I use them too?

Thank you for your help

[ekwoka]

Pretty sure you can just dynamically bind x-teleport

[FabienHenon]

Are you sure about this?
According to the x-teleport code, there is no evaluation of the value and there is not effect : https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/directives/x-teleport.js#L77