Атрибут hx-inherit

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

Чтобы поддержать этот режим разработки, htmx предлагает настройку htmx.config.disableInheritance, которую можно установить в true, чтобы предотвратить наследование как поведение по умолчанию для любых атрибутов htmx.

Атрибут hx-inherit позволяет вам вручную контролировать наследование атрибутов.

htmx оценивает наследование атрибутов следующим образом:

• когда hx-inherit установлен на родительском узле
  • inherit="*" — всё наследование атрибутов для этого элемента будет включено
  • hx-inherit="hx-select hx-get hx-target" — включает наследование только для одного или нескольких указанных атрибутов

Вот пример элемента div, который использует атрибут hx-target для группы тегов якоря, когда htmx.config.disableInheritance установлен в false:

<div hx-target="#tab-container" hx-inherit="hx-target">
  <a hx-boost="true" href="/tab1">Вкладка 1</a>
  <a hx-boost="true" href="/tab2">Вкладка 2</a>
  <a hx-boost="true" href="/tab3">Вкладка 3</a>
</div>

Примечание

• Подробнее о наследовании атрибутов