Fix processing of template nodes #10

trescenzi · 2025-05-14T02:13:19Z

The contents of template elements aren't technically the children of that template element. So template.querySelectorAll('button[action]') would always return an empty nodelist, however template.content.querySelectorAll('button[action]') would return buttons that are part of the template's contents.

I discovered this when working with two buttons like:

<button target="_this" action="/feeds/subscribe/1" method="PUT">Subscribe</button>
<button target="_this" action="/feeds/subscribe/1" method="DELETE">Unsubscribe</button>

Where the respective actions return the opposite button. Only the first click worked.

Looking into it a bit deeper in the spec I found that in fact the content model of the template node is nothing:

It is also possible, as a result of DOM manipulation, for a template element to contain Text nodes and element nodes; however, having any is a violation of the template element's content model, since its content model is defined as nothing.

A little example you could run in a browser console:

const template = document.createElement('template');
template.innerHTML = '<button action="POST" target="_this">Click Me!</button';
console.log(template.querySelectorAll('button[action]'));
console.log(template.content.querySelectorAll('button[action]'));

I added a test and confirmed that it passes with this change and fails without it.

Happy to do this a different way if you think there's a better solution. Just noticed this and wanted to contribute back. Love the proposal and it's working great for a small site that doesn't need everything that htmx brings.

Templates don't have children, instead the `content` is where the actual dom nodes that they contain are. In order to be able to insert nodes that have been processed the content needs to be processed not the template node itself.

alexpetros · 2025-05-14T03:32:15Z

Hey, cool! You are actually the first person to tell me they're using this in production.

You're 100% right, the fix is excellent, and so is the corresponding test. Thanks so much for contributing ☺️

Fix processing of template nodes

e598642

Templates don't have children, instead the `content` is where the actual dom nodes that they contain are. In order to be able to insert nodes that have been processed the content needs to be processed not the template node itself.

alexpetros merged commit 6383913 into alexpetros:main May 14, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix processing of template nodes #10

Fix processing of template nodes #10

Fix processing of template nodes #10

Fix processing of template nodes #10

Conversation