htmx 4.0 is under construction — migration guide

htmx.config.morphSkipChildren

View as Markdown Open this page as Markdown
For LLMs
llms.txt htmx overview for LLMs
llms-full.txt Complete htmx docs for LLMs

Skip morphing children of specific elements

The htmx.config.morphSkipChildren option is a CSS selector for elements whose children won’t be morphed.

The element itself updates (attributes change). Its children stay untouched.

Default: '[hx-morph-skip-children]'

Add hx-morph-skip-children to any element in your server templates to freeze its children during morph while still allowing its own attributes to update:

<lit-component hx-morph-skip-children value="{{value}}">...</lit-component>

Or override with any CSS selector:

htmx.config.morphSkipChildren = "my-component";

Use Cases

Custom web components: Update component attributes but preserve managed children.

Client-managed DOM: Let JavaScript frameworks control their own DOM trees.

Multiple components:

htmx.config.morphSkipChildren = "my-component, other-component, .skip-kids";

Difference from morphSkip

  • morphSkip: Freezes entire element (no changes at all)
  • morphSkipChildren: Updates element attributes, freezes children only