Advanced htmx: hx-disinherit
So we've now gone through every single attribute except 1. The final attribute, that does not mean that there's not gonna be, more episodes and sort of more things to cover, but the final actual attribute is h x disinherit. So h x disinherit is, I guess, it sort of relies first on kind of understanding what is inheritance in HTMX. In most elements, most attributes that you set, so h x target, h x get, h x, you know, those are also setting them, whatever value set is also being set as the default for all elements below in the DOM. And the precedent for this it's sort of similar to, the way CSS works.
Lazarus:So like you set a font size in a certain element, in a certain div, in a certain whatever it is, and everything that's within that the font size is going to be set at that level until you override it, until you change it. So that's the that's the overall concept of inheritance. It's kind of, familiar with the DOM. That's how a lot of things in the DOM works. So for most things, it's a big time saver to inherit that.
Lazarus:Let's say you wanna keep one value the same across your whole app for whatever reason. The docs give an example of a confirm message, which that works. So you you set your h x confirm equals, and you set your your value, you know, when it pops up, it's always gonna give you the same thing. If you if you want to, you can set that just per button. But if you set that at a higher level and everything, all the buttons inside that DOM are going to get that every time you submit something, they're gonna get that same confirm message.
Lazarus:So that can be a big time saver on a lot of stuff. If you know that you're reusing a bunch of things, then you can just set it higher up in the DOM and that works for, you know, h x boost for instance. That's a very common use case. You might want all your links inside your own app to be boosted, to be use HX boost so that it doesn't do a full page reload. And you can just set that at the root, and then you can turn it off on individual cases if you need to.
Lazarus:So this is kind of just the standard way that inheritance works. Most situations, it's gonna do exactly what you want. It's gonna save you a lot of repetition, but there's unexpected things that can happen too. And even just you can see it right away with the example of HX boost or HX confirm, you're gonna have a button that you don't want to have that message. And so if you've forgotten that you set HX confirm higher up and you're clicking the button and there's a message and you're like, where did this come from?
Lazarus:Same deal with these other attributes. You have, you know, if you don't remember that it's inherited, it's not exactly clear right in front of you, that it's happening, you know, what the, what the thing is. So that's sort of the, the unexpected, the downside of if inheritance. There was a good example of this on a Reddit thread, called h x select reset. That's the name of the thread, by a user, the itchy oyster.
Lazarus:I didn't make that name up, but I'll link to the thread. And they had a section in their post that utilized HX select to filter out the response for that area of the DOM. But inside that section, they wanted to do a different, you know, HTMX call and a different HTMX get, they wanted to replace a larger, different part of the page, maybe the whole page, But because they had an h x select on a higher up part of the dom, as one of their parents in the dom, It that h x select was inherited to everything below. So even when they just did a regular h x get within that, they were expecting to get the whole dom back. Instead, they were just getting the parts from the h x select.
Lazarus:So that's kind of unexpected. Right? If you said an h x select for something else, some other reason, you don't necessarily think, okay, well, now all my h x gets below that are going to have the same h x select. It's a little strange. Or if you're not ready for it, which in this case, I didn't, you know, if you think of things as inherited all the time, it makes sense, but if you're not really expecting that, then, yeah, it is confusing.
Lazarus:So their question was a fair one. How do we get HX select back to the default? Like we just wanna remove the h x select, we just don't wanna have it on this element anymore. So they suggested, you know, maybe HTML needs an h x select equals all, this might turn into a future request, there are some comments on there, I made some comments on there, but it turns out the answer I the answer is outside of the h x select selector, outside of the h x select in general, the attribute. The answer is to turn off the inheritance for that element, and that's what this episode is about.
Lazarus:H x disinheritant disinherit, it breaks that chain of inheritance. So you can break the chain, the specific chain, by putting in the name of the attribute that you want to break the chain for. So h x disinherit equals h x select. And that just takes that inherited chain and cuts it, so that everything below it no longer has that h x select that's there, you know, that was inherited from there, or the h x target, or the h x get, the h x confirm, all these things. Everything that is you know, most of these attributes are inherited.
Lazarus:Anything that's inherited, you can break it. You can also do a star to just, so you can do it 1 by 1, you know, a check select, a just get target, or you can cut do a comma separated list. So if you want if you know which specific ones, you can do the list or you can do the star, which just breaks the chain for all of them. Disinher h x disinher equals star, that will will stop the whole chain. So you can place this disinherit attribute on the same element as the original attributes that are set.
Lazarus:So that's kind of a nice way to sort of say, okay, I'm setting this select, but I just I don't want this to be, you know, to go down the chain, rather than going down the chain and setting it on everything else that uses an h x get or something like that within that element of the dom. So you can just set it right at the same point that you are setting the hx select, or the confirm, or the get, or whatever it is, you know. If if you want to make sure that it's not inherited, you can just use that h x disinherit. Or you can set it on the parent element. So somewhere else in the chain of the dom you can set it so that you can specifically say, okay, certain elements here, we do not want.
Lazarus:So it has to be on the parent. It can't be on that. So, you know, down the chain, let's say you have, another h x get that's sort of deep nested inside the dom, and that's the one that you want to be not affected by the inheritance. You don't put the disinherit onto that, you put it onto the parent. So it's the parent that breaks the chain.
Lazarus:So this is the final one of these attributes, these advanced attributes. We're gonna do the next part is gonna be the response and the request headers, so these are sort of special HTMLX response and request headers. That'll be the next big chunk. But before we do that, I'm gonna go through, similar to what we did, with the basic attributes, I'm gonna go through the advanced attributes that we've done, all of these sort of advanced attributes, group them together, and sort of talk about them as a as a group and kind of, you know, try to find a way to, put them into our heads in a way that we can sort of think of them together and remember that they exist. Because this is one of those ones I didn't know this existed.
Lazarus:It's great. And you just think, oh, yeah, everything's are inherited. But, you know, if you're using these inheritance, you need something to break that chain sometimes. So that's where that's where the disinherit comes in.
