htmx.config.morphSkipChildren ~ htmx

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: undefined

Example


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


<meta name="htmx-config" content='{"morphSkipChildren":"my-component"}'>

Usage


<body hx-swap:inherited="innerMorph">
  <my-component data-value="123">
    <!-- Element attributes update above -->
    <!-- Children below stay frozen -->
    <div class="internal">Preserved</div>
  </my-component>
</body>

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