10

ページの複数の場所で「同じ」HTML 要素をレンダリングしたいと考えています。この要素はスクリプト化/アニメーション化されており、さまざまなレンダリングを同期させる必要があります。

私が検討した解決策は次のとおりです。

  1. 要素のコピーを複数の場所に配置し、それらすべてを更新します。これは私が避けようとしているものです。
  2. 要素のコピーを複数の場所に配置します。コピーの 1 つを更新し、ミューテーション イベントを使用してそれらの変更をキャプチャし、他のコピーに対して再生します。大変な作業のようです。
  3. シャドウ DOM を使用します。私はこの代替手段に大きな期待を寄せていましたが、最初は「挿入ポイント」を使用して可能に見えました。これにより、ここの DOM サブツリーをあそこの DOM サブツリーに仮想的に配置できます。

Chrome 25 で利用可能なこの最後の代替手段はテストしていません。W3C仕様には次のように書かれています：

特別な考慮に値する 1 つのケースは、挿入ポイントが別のシャドウ ホストの子ノードである場合です。ノードが複数の挿入ポイントに分散されることの影響は、再投影と呼ばれます。

しかしその後...

再投影中に複数の挿入ポイントに分散されるにもかかわらず、再投影が発生する制約のために、ノードはまだ 1 回だけレンダリングされます。挿入ポイントはシャドウ ホストの子である場合にのみ再投影の対象となるため、それらは決してレンダリングされません。代わりに、シャドウ ツリーがその場所にレンダリングされます。

Shadow DOM は私が望むことを実行する可能性が高く、テストする価値があると思われますか、それとも他の推奨されるアプローチはありますか?

4

1 に答える 1

8

Shadow DOM の再投影は、あなたが望むことをしません。

私は、Chrome で Shadow DOM を実装するチームの一員です。仕様のコメントは正しいです。Shadow DOM のコンテンツは、多くても 1 回レンダリングされます。

正確に達成しようとしていることに応じて、役立つ可能性のあるいくつかのアイデアを次に示します。

Firefox には、要素を背景として使用できる実験的な機能があります。background: -moz-element(#foo);これは、fooがコピーする要素の ID を使用して CSS に接続されます。画像は「ライブ」です。要素への変更は、背景として使用されているすべての場所に反映されます。

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

すべてのコピーをインタラクティブにしたい場合は、Mutation Observers を使用してください。Mutation Observers をラップし、ページ全体をミラーリングするChrome 拡張機能の例を含むMutation Summary というライブラリがあります。DOM のサブツリーをミラーリングするように適応させることができます。アプリケーションによっては、Mutation Observers を使用して DOM を双方向にミラーリングすることもできます。

于 2013-03-01T13:29:59.113 に答える