[New feature] nextElementSibling and previousElementSibling target selectors
I'm very often using the following pattern :
<div class="relative">
<button hx-get="/some_popup" hx-target="nextElementSibling" hx-swap="outerHTML"></button>
<div class="popup"></div>
</div>
clicking on the button brings in a popup, in place of a initially empty element. The relative parent allows positioning the popup next to the button with a position set to absolute. Ending up with something like:
<div class="relative">
<button hx-get="/some_popup" hx-target="nextElementSibling" hx-swap="outerHTML"></button>
<div class="popup visible">
<button>Action 1</button>
<button>Action 2</button>
Or whatever else...
</div>
</div>
Since the JS API exposes element.nextElementSibling and element.previousElementSibling, I think eponym values for hx-target would make sense and be handy.
The existing way of doing such a thing would be, in this example, to use a hx-target="next div" or hx-target="next .popup" for example. The current implementation under those next & previous elements, are calling document.querySelectorAll with the passed selector, then comparing positions.
Not that it's especially slow: I tried it out just to see, and for a next div selector on a page with ~30 000 divs, it takes from 1.5 ms if the element is near the start of the results set, up to 75 ms if it's rather to the end of the results set. Don't get me wrong there ; it's clearly negligible given such a huge page. Still though, in this situation, calling nextElementSibling / previousElementSibling is, in comparison, instant
I thought we might as well simply use the fastest path here, given that this change only adds 482 bytes to the code (that is, before minification and gzip), and, in my opinion, makes for a clearer structure (readability) when you know you're targeting the direct adjacent sibling