hx-disinherit

htmx 的默认行为是自动“继承”许多属性：也就是说，诸如 hx-target 之类的属性可以放在父元素上，并且所有子元素都将继承该目标。

hx-disinherit 属性允许您控制这种自动属性继承。一个示例场景是允许您在页面的 body 元素上放置一个 hx-boost，但覆盖页面特定部分的行为以允许更具体的行为。

htmx 按以下方式评估属性继承

• 当在父节点上设置 hx-disinherit 时
  • hx-disinherit="*" 此元素的所有属性继承将被禁用
  • hx-disinherit="hx-select hx-get hx-target" 仅禁用一个或多个指定属性的继承

<div hx-boost="true" hx-select="#content" hx-target="#content" hx-disinherit="*">
  <a href="/page1">Go To Page 1</a> <!-- boosted with the attribute settings above -->
  <a href="/page2" hx-boost="unset">Go To Page 1</a> <!-- not boosted -->
  <button hx-get="/test" hx-target="this"></button> <!-- hx-select is not inherited -->
</div>

<div hx-boost="true" hx-select="#content" hx-target="#content" hx-disinherit="hx-target">
  <!-- hx-select is automatically set to parent's value; hx-target is not inherited -->
  <button hx-get="/test"></button>
</div>

<div hx-select="#content">
  <div hx-boost="true" hx-target="#content" hx-disinherit="hx-select">
    <!-- hx-target is automatically inherited from parent's value -->
    <!-- hx-select is not inherited, because the direct parent does
    disables inheritance, despite not specifying hx-select itself -->
    <button hx-get="/test"></button>
  </div>
</div>

注意

• 阅读有关 属性继承 的更多信息