Alpine and HTML template elements

[docdunning]

I'm sure I've read that Alpine does not parse any directives inside an HTML template, but I'd appreciate it if someone could confirm, please.

I'm using templates to contain reusable code. They are brought into the DOM as needed. Ideally, I'd like to be able to use x-for inside the template.

Example code (inside an Alpine x-data scope):

<template id="abc">
  <p>This is a common section reused as needed.</p>
  <template x-for="item in itemList" key="item.id">
    <div>
      <span x-text="item"></span>
    </div>
  </template>
</template>

In this context, Alpine does not process the x-for and x-text directives. Like I say, I can kind of understand why this is, and I have a workaround that works, but just feels a tad clumsy and it's not reactive.

Am I missing something? Is there a way to use Alpine directives in HTML templates?

[SimoTod]

You misunderstood. The content of the template is not going to change or be reactive but when the html is applied on the dom, it works as expected (when alpine or just standard JavaScript copies and inserts the template content into your page, as long as it's in an alpine component)

[docdunning]

Of course - thanks for explaining :-)

[ekwoka]

Template elements don't exist in the document tree, so they aren't processed by anything. Once the content is copied onto the document, Alpine will process it.

[docdunning]

Thanks - I get that now. It's working fine in my app.