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

Большинство атрибутов в htmx наследуются: они применяются как к элементу, на котором указаны, так и к его дочерним элементам. Это позволяет «поднимать» атрибуты вверх по DOM, избегая дублирования кода. Рассмотрим следующий пример:

<button hx-delete="/account" hx-confirm="Уверены?">
  Удалить учётку
</button>
<button hx-put="/account" hx-confirm="Уверены?">
  Обновить учётку
</button>

В данном случае атрибут hx-confirm дублируется. Решение — перенести его на уровень выше, к родительскому элементу:

<div hx-confirm="Уверены?">
  <button hx-delete="/account">
    Удалить учётку
  </button>
  <button hx-put="/account">
    Обновить учётку
  </button>
</div>

Теперь атрибут hx-confirm будет применяться ко всем элементам с htmx внутри этого блока.

Иногда требуется отменить это наследование. Например, если в группе есть кнопка отмены, для которой подтверждение не нужно. В этом случае можно добавить директиву unset:

<button hx-confirm="unset">Отмена</button>

```html
<div hx-confirm="Уверены?">
  <button hx-delete="/account">
    Удалить учётку
  </button>
  <button hx-put="/account">
    Обновить учётку
  </button>
  <button hx-confirm="unset" hx-get="/">
    Отменить
  </button>
</div>

Две верхние кнопки будут показывать диалог подтверждения, а нижняя кнопка отмены — нет.

Наследование можно отключить для отдельных элементов и атрибутов с помощью атрибута hx-disinherit.

Чтобы полностью отключить наследование атрибутов, установите конфигурационную переменную htmx.config.disableInheritance в true. Это отключит наследование по умолчанию и позволит явно указывать наследование с помощью атрибута hx-inherit.