How to hx-target="parent"?

[imbolc]

How to target parent without any assumptions about it?

It seems like an essential feature for building self-contained widgets that don't rely on any particular surrounding HTML structure. Now I ended up wrapping them in a root element, whose purpose is only to be a target for `hx-target="closest [data-widget-root]".

[Telroshan]

If you don't want to rely on the wrapping structure or the widget's surroundings in general, you will probably not want to target any of those other elements anyway.
For example, hx-target="this" hx-swap="outerHTML" will allow you to replace your widget no matter what structure is around, without needing to target the parent element.
Let me know if this helps!

[imbolc]

If you don't want to rely on the wrapping structure or the widget's surroundings in general, you will probably not want to target any of those other elements anyway

That's a valid point in terms of purity. But still there's a practical cases when I'd prefer to rely only on the fact that the parent doesn't have any content except of the widget, but don't care about what parent it is. For example we could have a table with the widget in a cell and then we decide to use div's instead of td's. Now we would have to change widgets from hx-target="closest td" to closest div.

For example, hx-target="this" hx-swap="outerHTML" will allow you to replace your widget no matter what structure is around

In my case widgets often don't have a single root element. For example I extensively use htmx-template. So the structure is:

<a hx-get="template:widget">Click to edit</a>
<template id="widget"><input hx-target="any parent"></template>

[Telroshan]

In my case widgets often don't have a single root element

This sounds convoluted to me for a "self-contained widget" as you then directly depend on the parent element's styling, for ex a flex row vs a standard block display, could mess up your widget's display.
I would suggest using a root element to enclose your self contained widget as you described in your initial post in this case.

As far as I know, there's no current straightforward selector to achieve exactly what you want (closest * will target the element itself as that's how Element.closest works, by checking the element itself first)
A convoluted way could be using closest :not(#id) (in your example above, for ex <input hx-target="closest :not(input)">) but that's... convoluted for sure

[imbolc]

I agree on self containment definition and closest :not(#id) is what I was looking for ;) Thank you 🙏