可能であれば影を使用してHTML要素をミラーリングするDOM

Question

"同じ" HTML要素をページの複数の場所に表示したいと思います。 この要素はスクリプト化/アニメーション化されており、さまざまなレンダリングを同期させておく必要があります。私が検討している

ソリューションが含まれます：

1. は、複数の場所で要素のコピーを入れて、それらのすべてを更新します。これは私が避けようとしていることです。
2. 要素のコピーを複数の場所に配置します。コピーの1つを更新し、突然変異イベントを使用してそれらの変更をキャプチャし、他のコピーに対して再生します。たくさんの仕事のようです。
3. シャドウDOMを使用します。私は、最初に可能であるように思われるこの代替案に対して、ここでのDOMサブツリーがそこのDOMサブツリーに仮想的に配置されることを可能にする「挿入ポイント」を使用しています。

私はこの最後の選択肢であるavailable in Chrome 25をテストしていません。 W3C specは言う：特別な配慮に値する

一つのケースは 挿入ポイントが別のシャドウホストの子ノード...ノードが に複数の挿入ポイントに配布されるの効果がある状況がありますは再投影と呼ばれます。

しかし、その後... 再投影中に複数の挿入ポイントに配布されているにもかかわらず

、ノードのため再投影が起こる下 制約から、まだ一度だけレンダリングされます： の挿入ポイントは、 シャドウホストの子である場合に再投影の対象になるため、決してレンダリングされません。その代わりに、シャドウツリーは がレンダリングされています。

シャドーDOMが私の望むことを実行する可能性が高く、テストする価値はあるのでしょうか、それとも他に推奨される方法がありますか？

Answer 1

シャドウDOM再投影は、あなたが望むことをしません。

私はChromeでShadow DOMを実装しているチームの一員です。この仕様の解説は、シャドーDOMの右端のコンテンツが最大で1回レンダリングされることです。

Firefoxはbackground: -moz-element(#foo);FOOをがされて使用してこれは、CSSにフックアップされてan element can be used as a background.実験的な機能を持っています。ここ

はあなたが達成しようとしている正確に何に応じて、役に立つかもしれないアイデアのカップルですコピーしたい要素のID。イメージは「生きている」。要素の変更はバックグラウンドとして使用されるたびに反映されます。

を使用する-moz-elementにはいくつかの潜在的な欠点があります。これはFirefoxの一部のバージョンでのみ実装されています。これは実験的なことです。つまり、ある時点で機能が変化したり消えたりする可能性があります。コピーはインタラクティブではありません。その中のボタンをクリックすることはできません。コピーをホバリングしても:hoverのスタイルがトリガーされません。

すべてのコピーをインタラクティブにする場合は、「変異オブザーバ」を使用します。突然変異観測者を包むa library called Mutation Summaryがあり、an example Chrome extensionにはページ全体を映し出すものが含まれています。あなたはそれをDOMのサブツリーを反映するように適応させることができます。アプリケーションによっては、Mutation Observerを使用してDOMを双方向にミラーリングすることもできます。