hx-disinherit

По умолчанию htmx автоматически «унаследует» многие атрибуты: например, атрибут hx-target можно поместить на родительский элемент, и все дочерние элементы унаследуют этот целевой элемент.

Атрибут hx-disinherit позволяет контролировать это автоматическое наследование атрибутов. Пример сценария — размещение hx-boost на body элементе страницы, но переопределение этого поведения в определенной части страницы для более специфичного поведения.

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>

Примечания

• Узнайте больше о Наследовании атрибутов