hx-swap-oob requires target having an ID

I have potentially multiple avatar in a page so the avatar is defined as

<div class="avatar">
</div>

without an id.

After the avatar is updated from a hx-post="update_profile" somewhere, the returned piece has

<div class="avatar" hx-swap-oob="true:.avatar">
</div>

which, according to the doc on hx-swap-oob, would update the first avatar, which would be the one on the header and I am ok with it. However, the code triggers

DOMException: Failed to execute 'querySelector' on 'Document': '#' is not a valid selector.

from what I believe by line 453 of this piece of code

https://github.com/bigskysoftware/htmx/blob/c26e3c10bbcee836ea0ba7b091525737ac6cfd00/src/htmx.js#L441-L454

despite the fact that the oobElement is found by class name so no id is required.

https://github.com/bigskysoftware/htmx/blob/c26e3c10bbcee836ea0ba7b091525737ac6cfd00/src/htmx.js#L470-L474

The code also appears to suggest that all matching elements will be replaced (which is even better for me), instead of “If a selector is given, the first element matching that selector will be swapped.”.

Is this a bug?

[bencroker]

Best to create a new issue for this, this issue has become stale and too long.

[BoPeng]

My PR was wrong but the feature request was valid.