search

imacrayon / alpine-ajax

An Alpine.js plugin for building server-powered frontends.
https://alpine-ajax.js.org
MIT License
558 stars 11 forks source link

Fix merging table elements #50

Closed imacrayon closed 7 months ago

imacrayon commented 7 months ago

This PR fixes #47 by wrapping all the incoming HTML in a <template> before parsing it.

createContextualFragment just interprets table fragments as text nodes unless they're wrapped with a template.

document.createRange().createContextualFragment('<tr><td>test</td></tr>') // DocumentFragment [#text]

document.createRange().createContextualFragment('<template><tr><td>test</td></tr></template>').firstElementChild.content // DocumentFragment [#tr]

I considered switching to DOMParser.parseFromString to parse incoming HTML, however some basic performance tests showed createContextualFragment was just barely faster than parseFromString when parsing a few different sized HTML fragments & documents. createContextualFragment appeared to lose it's edge as the HTML grew beyond what I would consider a "typical" amount of HTML for a webpage, so I think it's okay to stick with for now.