htmx content swapping and the missing inline script evaluation boundary

The Script Execution Boundary

Under htmx's default swap policy, there is no supported boundary for the automatic execution of response-embedded <script> tags. htmx deliberately treats these elements as inert text/nodes during the swap process to maintain predictability and security. Even when htmx.process() is called, it only initializes hx-* attributes and internal event listeners; it does not evaluate arbitrary JavaScript blocks contained within the swapped HTML.

Morphing Swaps and Version Consistency

The no-execution behavior remains identical across htmx 1.x and 2.x, including when using morphing swaps. Morphing (whether via the morphdom library or native htmx 2.x capabilities) focuses on updating the attributes and content of existing DOM nodes to match the new fragment. Because the goal is to minimize DOM churn, the library does not trigger the browser's script evaluation engine for the incoming fragment.

Version-Stable Initialization Hooks

For logic that must execute after a swap, the most version-stable and supported mechanisms are:

• htmx:afterSwap event: This is the primary lifecycle hook. It triggers after the new content has been inserted into the DOM but before it is settled. It is the most reliable place to manually initialize third-party libraries or run setup scripts.
• hx-on attributes: Introduced to provide a declarative way to handle events directly on elements. These are processed during the htmx.process() phase and are stable across recent versions.
• HX-Trigger HTTP Header: The most decoupled approach. The server sends a header (e.g., HX-Trigger: "myEvent"), and the client listens for that event via document.addEventListener.

Implementation Summary

Method	Execution Trigger	Stability
hx-on	Element Event	High (Modern)
htmx:afterSwap	DOM Insertion	Very High
HX-Trigger	Server Response	Very High

Verification: To confirm the boundary in your environment, attempt to return a fragment containing <script>console.log('test')</script>. If the console remains empty, the boundary is active. You can then verify the hook by adding the following listener:

document.addEventListener('htmx:afterSwap', function(evt) {
    console.log('Swap complete. Target:', evt.detail.target);
});

Note: Please specify if you are using a specific third-party morphing extension, as some custom implementations may attempt to manually evaluate scripts, which deviates from standard htmx behavior.