hx-disinherit

htmx のデフォルトの動作は、多くの属性を自動的に「継承」することです。つまり、hx-target などの属性は親要素に配置でき、すべての子要素がそのターゲットを継承します。

hx-disinherit 属性を使用すると、この自動的な属性継承を制御できます。具体例としては、ページの body 要素に hx-boost を配置できますが、ページの特定の部分でその動作をオーバーライドしてさらに具体的な動作を許可することができます。

htmxは次のように属性継承を評価します。

• 親ノードで hx-disinherit が設定されている場合
  • hx-disinherit="*" この要素のすべての属性継承が無効になります。
  • hx-disinherit="hx-select hx-get hx-target" 指定された1つ以上の属性のみの継承を無効にします。

<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>

注意

• 詳細については、属性継承 をお読みください。