The htmx.config.morphSkip option is a CSS selector for elements to skip during morphing.
Matching elements won’t be morphed. They stay exactly as they are.
Default: undefined
Example
htmx.config.morphSkip = ".no-morph";
<meta name="htmx-config" content='{"morphSkip":".no-morph"}'>
Usage
<body hx-swap:inherited="innerMorph"> <div class="no-morph"> <!-- Never morphed. Stays frozen. --> </div> <div> <!-- Morphed normally --> </div> </body>
Use Cases
Third-party widgets: Preserve complex widgets that manage their own state.
Active animations: Skip elements with ongoing CSS or JavaScript animations.
Client-side state: Protect elements with complex state that would be lost.
Multiple selectors:
htmx.config.morphSkip = ".widget, .animated, custom-element";