hx-inherit

htmx のデフォルトの挙動は、多数の属性を自動的に「継承」することです。つまり、hx-target などの属性は親要素に適用することができ、すべての子要素はそのターゲットを継承します。この機能が気に入らない人もおり、代わりに明確に属性の継承を指定することを好みます。

htmxはこのような開発形態をサポートするために、htmx.config.disableInheritance 設定を提供しています。この設定を false に設定すると、継承が htmx の属性のいずれかに対するデフォルトの挙動になるのを防げます。

hx-inherit 属性を使用すると、属性の継承を手動で制御できます。

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

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

htmx.config.disableInheritance が false に設定されている場合、一連のアンカータグに hx-target 属性を共有する div の例は次のようになります。

<div hx-target="#tab-container" hx-inherit="hx-target">
  <a hx-boost="true" href="/tab1">Tab 1</a>
  <a hx-boost="true" href="/tab2">Tab 2</a>
  <a hx-boost="true" href="/tab3">Tab 3</a>
</div>

メモ

• 属性の継承 について詳しく読む