試行中の moveBefore() サポート

このページでは、試行中の moveBefore() DOM API の使用について説明します。これは、利用可能であれば htmx の hx-preserve 属性に統合される Chrome Canary で使用できます。

#Chrome Canary の取得と moveBefore() の有効化

デモを正しく動作させるには、Chrome Canary をインストールして API を有効にする必要があります。

• chrome://flags/#atomic-move にアクセスします。
• 「Atomic DOM move」を有効にします。

htmx は、利用可能な場合は hx-preserve 機能でこの API を利用し、画面上で新しいコンテンツがマージされるときに、要素を「保存済み」としてマークして、すべての状態を保存できます。これは、新しいページの構造がビデオ要素の移動を回避するのに「十分に近い」必要があるモルフィングなどの現在の代替手法よりも、開発者エクスペリエンスが向上します。

#デモ

以下のビデオを調べると、div 要素に埋め込まれていることがわかります。ブーストされた「詳細の表示」リンクをクリックすると、同じ ID を持つビデオ要素がある別のページに切り替わり、代わりに figure 要素に埋め込まれます。moveBefore() 機能がないと、この状況でビデオを再生し続けることは不可能です。これは、「親の変更」（つまり、要素の親の変更）によりビデオがリセットされるためです。

moveBefore() を使用すると、開発者はページのレイアウトを完全に変更しながらも、要素の再生状態、フォーカスなどを保持できるため、Web 開発における可能性が大幅に広がります。