Understanding the html★ request flow from click to content swap.

Request Flow

When a user clicks an html★ enhanced element, the following sequence occurs:

1. Activation Check

html★ checks if the element should be processed:

  • Does it have data-target (directly or inherited)?
  • Is it not explicitly skipped? (external URLs, downloads, etc.)

2. Attribute Resolution

Attributes are resolved by walking up the DOM tree:

  • Find the nearest data-target
  • Find the nearest data-swap
  • Find the nearest data-push
  • Infer URL from href or action
  • Infer method from method attribute

3. Request

The fetch request is made:

  • Set [data-loading] attribute on the element
  • Execute fetch(url, { method, headers })
  • Include form data if applicable

4. Swap

Content is swapped into the target:

  • Set [data-swapping] on target
  • If View Transitions enabled, use document.startViewTransition()
  • Execute swap strategy (inner, outer, append, etc.)
  • Process any out-of-band swaps

5. Post-Swap

Cleanup and history management:

  • If data-push: update URL with history.pushState()
  • If target is <dialog>: call showModal()
  • Remove loading/swapping attributes
  • Set [data-success] briefly
  • Re-initialize new elements

Visual Flow

Auto-Initialization

html★ automatically initializes when the DOM is ready. After each swap, new elements in the swapped content are also initialized, so dynamically loaded content works immediately.

Manual Initialization: If you dynamically add content without html★, you can manually initialize it: