hx-swap-oobって何？
HTMXを使っています。調べつつ、私が覚えておきたいことを記録します。
hx-swap-oob は、サーバーのレスポンス側に付ける属性です。サーバーからのレスポンスに含めることでメインのターゲット以外の要素も同時に更新できます。
例えば、TODOアプリにおいて、TODOを追加した後にリスト本体と件数表示の両方を更新したいケースがあります。その際、サーバー側で次のようなレスポンスを返すように設定したとします。
<!-- サーバーからのレスポンス -->
<div id="todo-list">
<!-- メインターゲットに入る新しいリスト -->
<li>買い物</li>
<li>掃除</li>
<li>洗濯</li>
</div>
<span id="todo-count" hx-swap-oob="true">3件</span>
クライアント側は、hx-swap-oob="true" が付いた要素を受け取ると、ページ上でIDされたidを持つ要素を探して更新します。この例だと #todo-list がメインターゲットに入り、#todo-count はページ上の該当要素が差し替わります。
true の代わりに挿入方法を指定することもできます。hx-swap と同じ値が使えて、デフォルトは outerHTML です。
一つのリクエストでページの複数箇所を書き換えたいときに使います。例えば、通知バッジの更新、ナビゲーションの状態変更、フォーム送信後の複数箇所の反映など。
公式ドキュメントは以下にあります。