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>

注意

• 閱讀更多關於屬性繼承的資訊