hx-history-elt

Помечает элемент, который будет заменён при восстановлении истории

Атрибут hx-history-elt выбирает элемент, который восстанавливается при навигации по истории.

Остальная часть страницы остаётся без изменений.

По умолчанию ядро htmx восстанавливает историю с помощью GET, содержащего HX-History-Restore-Request. Сервер возвращает полную страницу, а htmx выбирает её элемент hx-history-elt и заменяет им элемент на текущей странице.

Расширения могут отменить этот запрос и восстановить содержимое другим способом. Например, hx-history-cache восстанавливает сохранённый снимок DOM при попадании в кэш.

Синтаксис

<main hx-history-elt>
    <!-- only this element is replaced on back/forward navigation -->
</main>

<body>
    <nav><!-- never replaced --></nav>

    <main hx-history-elt>
        <h1>Page 1</h1>
        <button hx-get="/page2" hx-target="[hx-history-elt]" hx-push-url="/page2">
            Go to Page 2
        </button>
    </main>
</body>

Серверу следует обнаруживать HX-History-Restore-Request и возвращать полную страницу, содержащую соответствующий элемент hx-history-elt:

if request.headers["HX-History-Restore-Request"]:
    return render_full_page()   # includes <main hx-history-elt>...</main>
else:
    return render_fragment()    # just the inner content

Примечания

На странице одновременно должен присутствовать только один элемент hx-history-elt
Если hx-history-elt отсутствует, htmx заменяет <body>
Ответ сервера должен содержать элемент hx-history-elt, чтобы выбор работал; если он отсутствует, htmx заменяет всё содержимое body
В htmx 2 история кэшировалась в localStorage. В htmx 4 кэширование перенесено в расширение hx-history-cache — hx-history-elt работает как с повторной загрузкой, выполняемой ядром, так и с восстановлением из кэша расширением

Licensed under the Zero-Clause BSD License.
https://four.htmx.org/reference/attributes/hx-history-elt/