hx-history-elt

hx-history-elt 属性允许你指定在导航期间将用于快照和恢复页面状态的元素。默认情况下，使用 body 标签。对于大多数设置来说，这通常已经足够好了，但你可能想把它缩小到子元素。只需确保该元素在你的应用程序中始终可见，否则 htmx 将无法正确恢复历史导航。

指定某个元素为历史记录的来源（source of history snapshot），HTMX 会从这个元素中获取 HTML 片段用于浏览器的前进/后退导航恢复。

hx-history-elt不会被继承，通常情况下，不建议缩小历史快照范围。

工作原理

• HTMX 会监听 popstate；

• 找到设置了 hx-history-elt 的元素；

• 只替换它的 innerHTML，不会影响其他部分（如导航栏、脚本等）。

示例代码

<div id="main-content" hx-history-elt>
  <div hx-get="/page1" hx-push-url="true" hx-target="#main-content">
    加载页面内容
  </div>
</div>

你点击加载内容时，会通过 HTMX 发起请求，HTMX 会把 #main-content 的当前 HTML 片段保存到浏览器历史中。当你使用浏览器的前进或后退按钮时，只会恢复这个元素的内容。