blob: f045794da89e79de25c8fad20598c1256c5f074d (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
+++
title = "hx-inherit"
+++
The default behavior for htmx is to "inherit" many attributes automatically: that is, an attribute such as
[hx-target](@/attributes/hx-target.md) may be placed on a parent element, and all child elements will inherit
that target. Some people do not like this feature and instead prefer to explicitly specify inheritance for attributes.
To support this mode of development, htmx offers the `htmx.config.disableInheritance` setting, which can be set to
`false` to prevent inheritance from being the default behavior for any of the htmx attributes.
The `hx-inherit` attribute allows you to control the inheritance of attributes manually.
htmx evaluates attribute inheritance as follows:
* when `hx-inherit` is set on a parent node
* `inherit="*"` all attribute inheritance for this element will be enabled
* `hx-inherit="hx-select hx-get hx-target"` enable inheritance for only one or multiple specified attributes
Here is an example of a div that shares an `hx-target` attribute for a set of anchor tags when `htmx.config.disableInheritance`
is set to false:
```html
<div hx-target="#tab-container" hx-inherit="hx-target">
<a hx-boost="true" href="/tab1">Tab 1</a>
<a hx-boost="true" href="/tab2">Tab 2</a>
<a hx-boost="true" href="/tab3">Tab 3</a>
</div>
```
## Notes
* Read more about [Attribute Inheritance](@/docs.md#inheritance)
|
