Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

What are the mechanics and implications of swapping the contents of the HEAD tag?

See original GitHub issue

(I’m really having a wonderful experience with htmx so far, so thank you.)

My question: what performance implications are there in swapping out the entire contents of the HEAD tag?

In my response from my server, I include a HEAD tag like this:

<head hx-swap-oob="true"> ... contents here ... </head>

This works beautifully – in addition to the other swap, htmx also reaches up and swaps out the contents of the HEAD. (I’ll admit to being shocked. I didn’t expect it to “just work.”)

But does this actually swap the entire inner HTML of the HEAD, and is there a performance penalty there? I feel like doing this would force a reload and recalculation of all the CSS/JS, but perhaps I just don’t understand how that works.

In my…head (ha!), I feel like the contents of the existing HEAD just need to be “reconciled” against the contents of the new HEAD, and some changes need to be made – usually just the TITLE and some META. Ideally, the smallest number of changes would be made to make the existing HEAD match the incoming HEAD.

So, two questions:

How does htmx swap out the HEAD? I’m watching in inspector, and I just see the TITLE tag change, but that might just be how the inspector UI works – it only highlights what changes, even though the entire inner HTML was swapped.
If I did want more selectively swapping, would the morphdom extension be the right way to do this?
If morphdom is the right way to do, where to I put the hx-ext="morphdom-swap" and hx-swap="morphdom" attributes? On the MAIN element (where the hx-boost attribute is) or on the HEAD (and which one – the original, or the incoming)?