hx-swap-oob

hx-swap-oob属性を使用すると、レスポンス内のコンテンツの一部をターゲット以外のDOMにスワップ（「アウトオブバンド」）できます。これにより、レスポンスで他の要素の更新に更新を付加することができます。

次のレスポンスHTMLを考えてみてください。

<div>
 ...
</div>
<div id="alerts" hx-swap-oob="true">
    Saved!
</div>

最初のdivは通常どおりターゲットにスワップされます。しかし、2番目のdivはidがalertsの要素の代わりにスワップされ、ターゲットには含まれません。

hx-swap-oobの値は次のいずれかです。

値がtrueまたはouterHTML（同等）の場合、要素はインラインでスワップされます。

スワップ値が指定されている場合、そのスワップ戦略が使用され、outerHTML以外のすべての戦略について、カプセル化タグのペアが削除されます。

セレクタが指定されている場合、そのセレクタに一致するすべての要素がスワップされます。そうでない場合、新しいコンテンツと一致するIDを持つ要素がスワップされます。

代替スワップ戦略の使用

前に述べたように、trueまたはouterHTML以外のスワップ戦略を使用する場合、カプセル化タグは削除されるため、コンテキストに適切なタグで返されたデータをカプセル化する必要があります。

<tbody>を使用するテーブルに<tr>を挿入しようとするとき

<tbody hx-swap-oob="beforeend:#table tbody">
	<tr>
		...
	</tr>
</tbody>

「プレーン」テーブル

<table hx-swap-oob="beforeend:#table2">
	<tr>
		...
	</tr>
</table>

<li>は、たとえば<ul>、<ol>、<div>、<span>でカプセル化できます。

<ul hx-swap-oob="beforeend:#list1">
	<li>...</li>
</ul>

<p>は<div>または<span>でカプセル化できます。

<span hx-swap-oob="beforeend:#text">
	<p>...</p>
</span>

問題のあるテーブルとリスト

HTML仕様ではDOMに単独で存在できない要素の種類（<tr>、<td>、<th>、<thead>、<tbody>、<tfoot>、<colgroup>、<caption>、<col>、<li>）をカプセル化するために、templateタグを使用できます。

テーブル行のアウトオブバンドスワップの例を以下に示します。

<div>
    ...
</div>
<template>
    <tr id="row" hx-swap-oob="true">
        ...
    </tr>
</template>

これらのtemplateタグは、ページの最終的なコンテンツから削除されます。

扱いにくいSVG

SVGなどの一部の要素の種類は、子要素に特定のXML名前空間を使用します。これは、svgタグでカプセル化されていない限り、スワップされたときに内部要素が正しく機能しないのを防ぎます。既存のSVGの内部コンテンツを変更するには、templateタグとsvgタグの両方を使用して要素をカプセル化し、正しい名前空間が適用されるようにします。

svg要素のアウトオブバンドスワップの例を以下に示します。

<div>
    ...
</div>
<template><svg>
    <circle hx-swap-oob="true" id="circle1" r="35" cx="50" cy="50" fill="red" /> 
</svg></template>
<template><svg hx-swap-oob="beforebegin:#circle1">
    <circle id="circle2" r="45" cx="50" cy="50" fill="blue" /> 
</svg></template>

これにより、circle1がインラインで置き換えられ、circle2がcircle1の前に挿入されます。

これらのtemplateおよびsvgのラッピングタグは、ページの最終的なコンテンツから削除されます。

ネストされたOOBスワップ

デフォルトでは、レスポンス内のどこにでもhx-swap-oob=属性を持つ要素は、oobスワップ動作に対して処理されます。これは、テンプレートフラグメントを使用する場合に問題になる可能性があります。フラグメントがoobスワップターゲットとして、またより大きなフラグメントの一部として再利用される場合があります。より大きなフラグメントがメインレスポンスである場合、内部フラグメントは引き続きoobスワップとして処理され、domから削除されます。

この動作は、設定htmx.config.allowNestedOobSwapsをfalseに設定することで変更できます。この設定オプションがfalseの場合、OOBスワップはメインレスポンス要素に隣接する要素に対してのみ処理され、それ以外の場所のOOBスワップは無視され、oob-swap関連の属性は削除されます。

備考