HTMXで子要素への継承管理

子要素への継承

HTMXのほとんどの属性は親要素から子要素へ継承されます。 通常の方法で要素に適応されたのと同様に、彼らの子要素に適用されます。 これはコードの複製を避けるために役に立ちます。

例えば、次のHTMXを見てください。

<button hx-delete="/account" hx-confirm="本当に良いですか?">
    Delete My Account
</button>
<button hx-put="/account" hx-confirm="本当に良いですか?">
    Update My Account
</button>

ここには、重複したhx-confirm属性があります。 この属性を親要素に結びつけることで重複を防ぐことができます。

<div hx-confirm="Are you sure?">
    <button hx-delete="/account">
        Delete My Account
    </button>
    <button hx-put="/account">
        Update My Account
    </button>
</div>

このHX-Confirm属性は、子要素にあるすべてのhtmxの要素に適用されるようになりました。

この継承を無効化したい場合があります。 その場合は、unsetを設定することで、継承させないまたはオーバーライドすることができます。

<div hx-confirm="Are you sure?">
    <button hx-delete="/account">
        Delete My Account
    </button>
    <button hx-put="/account">
        Update My Account
    </button>
    <button hx-confirm="unset" hx-get="/">
        Cancel
    </button>
</div>

このようにすることで、上部2つのボタンには[確認]ダイアログが表示されますが、下のキャンセルボタンの押下時には表示されません。

または、hx-disinherit 属性を使用して、自動継承を無効にすることができます。