hx-headers inheritance cannot be disabled

[bjd183]

The docs note that: hx-headers is inherited and can be placed on a parent element.

However, hx-headers does not seem to respect inheritance settings via hx-disinherit="hx-headers" or <meta name="htmx-config" content='{"disableInheritance": true}'>.

The source at htmx.js:3514 uses

getValuesForElement(elt, 'hx-headers', false, headers)

rather than getClosestAttributeValue which is used by other disinheritable attributes.

Any content swapped into a parent element using hx-headers will also inherit the same headers. Current workaround is to add an additional containing div that unsets the headers.

<div hx-headers='{"myHeader": "myValue"}'>
<div hx-headers="unset">
...
</div>
</div>

[MichaelWest22]

I think the documentation is not 100% clear for hx-headers. There are 4 json evalulated properties that have a special kind of merge keys inheritance. hx-headers, hx-request, hx-vals and hx-vars. These 4 attributes do not use the normal inheritance it seems and do not use disableInheritance or hx-disinherit. Instead of just finding the single value that applies up the inherited parent chain like the other inherited attributes it uses a different method. It applies all key/value pairs up the parent chain but keys set at a lower child level overrides keys set on parents. It does stop if it hits 'unset' as you found.

But documentation is not 100% consistent but 3 of them have the same notes.

hx-request

hx-request is merge-inherited and can be placed on a parent element

hx-headers:

hx-headers is inherited and can be placed on a parent element.
A child declaration of a header overrides a parent declaration.

hx-vals

hx-vals is inherited and can be placed on a parent element.
A child declaration of a variable overrides a parent declaration.
Input values with the same name will be overridden by variable declarations.

hx-vars

hx-vars is inherited and can be placed on a parent element.
A child declaration of a variable overrides a parent declaration.
Input values with the same name will be overridden by variable declarations.

Not sure exactly how to improve the documentation.

[bjd183]

I suggest changes as follows for each of hx-request, hx-headers, hx-vals, and hx-vars:

hx-<attrname> key-value pairs are merge-inherited and can be placed on a parent element.
A child declaration of a key-value pair overrides a parent declaration.
Key-value merge-inheritance is independent of hx-inherit and hx-disinherit settings.

Also, I suggest modifying the documentation for hx-disinherit and hx-inherit, and at https://htmx.org/docs/#inheritance to specify that this inheritance does not apply to attributes with values that contain key-value pairs.