Featherlight.jsの落とし穴

jQuery用のlightbox系ライブラリのFeatherlight.jsでちょっとハマりました。
個人的には不具合っていうか、仕様の不備といってもいいんじゃないかなくらいな気持ちですが、どんなことにはまったかというとこんな感じ。

Featherlight.jsで表示したモーダルの中にformを入れる。
　↓
formのchangeイベントでvalueなどを取得し、値を表示。
　↓
なぜか同じ値が2重で出てくる。
（例えばselectで「テスト」という選択肢が選ばれたとして、それを別の個所に表示しようとすると「テストテスト」となる）


分かってみれば原因は簡単で、FeatherlightでHTMLを表示する仕組みは、デフォルトでは、ソース内の対象部分をスクリプトで複製しているので、これが問題でした。
（もともとHTMLに書いて非表示にしてある方を「オリジナル」、Featherlightが複製したほうを「コピー」とします）

要するにモーダルを表示したとき、上記の例で言えば、HTMLのソース上に同じformが2つ存在している状態になります。
なので、formに対して操作をするとき、参照の方法によってはオリジナルとコピーの両方に対して処理してしまうんですね。

これは僕的には不具合に近いものだと思っています。
なぜなら、仮に動作的に問題なかったとしても、オリジナルにidが指定してあれば同じ内容でコピーが作られるわけで、同じIDの要素が複数存在してしまいます。
実用上問題なくても、これはちょっと強引だなと思います。
汎用性が大事なプラグインの配布であまりやって良いこととは思えないですね。

そういう堅いことは言わないようにしたとしても、モーダルの中身に対してスクリプトでなんらか処理を行う場合は、ソース上はオリジナルとコピーで２重化されていることをふまえておかないとうまくいかない可能性があります。

また、モーダルを閉じるとコピーの部分は消去されます。
次にモーダルを開いたときに、その時点のオリジナルを元に再度コピーが作成されますので、コピーになんらかスクリプトで変化を加えていて、それがオリジナルには反映されていない場合は、リセットされた状態になります。

自分的にはちょっと癖があって使いにくい仕様だなと感じました。