New attribute for appending a DOM node x-node

[jacksleight]

I have a data object with a key called items, where the value is an array of DOM nodes, and I want to output those nodes within an x-for loop.

If I do:

<template x-for="(item, i) in items" :key="item">
    <div x-html="item"></div>
</template>

I just get the text [object HTMLElement] on the page. The way I'm currently working around this is to do:

<template x-for="(item, i) in items" :key="item">
    <div x-html="item.outerHTML"></div>
</template>

That works, but seems wasteful due to the unnecessary serialising/parsing of the HTML, and if any of those nodes have event listeners etc. they'd be lost.

Unless there's a correct way to do this already that I missed (?), a new x-node attribute would be really useful. It could expect the value to be a Node object, and then just append that node on to the element.

[jacksleight]

If anyone's interested this can now be done in v3 with a custom directive:

import Alpine from 'alpinejs'

Alpine.directive('node', (el, { expression }) => {
    let evaluate = Alpine.evaluateLater(el, expression)
    Alpine.effect(() => {
        evaluate(value => {
            Alpine.mutateDom(() => {
                el.appendChild(value);
            })
        })
    })
})

[calebporzio]

Yeah thanks @jacksleight - no plans to add this to core, but @jacksleight's implementation looks like a good shim for it!