Handle errors gracefully, show loading states, and control concurrent requests.

Error Boundaries

Use data-error-target to show a hidden element when a request fails:

When the request fails:

1. The error target element is shown (hidden attribute removed)
2. data-error and data-error-message attributes are set on the trigger element
3. An htmlstar:request-error event is dispatched

When a new request starts, the error target is automatically hidden again.

Retry Buttons

Add data-retry to any element inside the error target to create a retry button:

Clicking a data-retry button:

1. Hides the error target
2. Re-executes the original failed request

Retry uses event delegation, so you can add retry buttons dynamically.

Loading Indicators (Visibility)

Use data-loading-target to show a hidden element during requests:

The loading target's hidden attribute is removed when the request starts and restored when it completes (success or failure).

Loading Indicators (CSS Class)

Use data-loading-class to add a CSS class during requests:

The class is applied to both the trigger element and the target element during the request. Style it with CSS:

Combining Error and Loading

Use all three together for a complete UX:

Queue Control

Use data-queue to control how concurrent requests are handled:

The default is last, which is ideal for search inputs where only the latest query matters.

Built-in State Attributes

html★ automatically sets these attributes during requests for CSS styling:

These are removed automatically when state changes.

Examples

Dashboard with Loading States

Form Submission with Error Recovery

Using data-queue="first" prevents duplicate submissions if the user clicks multiple times.