Specchiamento di elementi HTML, probabilmente usando l'ombra DOM

Question

Mi piacerebbe avere lo "stesso" elemento HTML reso in più punti sulla pagina. Questo elemento è scriptato/animato e i vari rendering devono rimanere sincronizzati.

Le soluzioni che ho presi in considerazione comprendono:

1. copie posti dalla elemento in più punti e aggiornare tutti loro. Questo è quello che sto cercando di evitare.
2. Inserire copie dell'elemento in più posizioni. Aggiorna una delle copie e utilizza gli eventi di mutazione per acquisire tali modifiche e riprodurle contro le altre copie. Sembra un sacco di lavoro.
3. Usa DOM ombra. Avevo grandi speranze per questa alternativa, che inizialmente sembra essere possibile, utilizzando "punti di inserimento", che consentono a un sottoalbero DOM qui di essere virtualmente collocato in una sottostruttura DOM laggiù.

Non ho provato questa ultima alternativa, ovvero available in Chrome 25. Il W3C spec dice:

Un caso che merita particolare è la situazione in cui un punto di inserimento è un nodo figlio di un altro host ombra ... L'effetto di un nodo essendo distribuito in più di un punto di inserimento è chiamato riproiezione.

Ma poi ...

Nonostante sia distribuito a più di un punto di inserimento durante riproiezione, un nodo è ancora reso sola volta, a causa dei vincoli nelle quali si verifica la riproiezione : poiché i punti di inserimento sono soggetti a riproiezione solo se sono figli di un shadow host , non vengono mai visualizzati. Invece l'albero delle ombre è visualizzato al loro posto.

Sembra probabile che DOM ombra possa fare ciò che voglio e vale la pena di testare oppure esiste un altro approccio consigliato?

Answer 1

La riproiezione dell'ombra DOM non fa quello che vuoi.

Sono parte del team che implementa Shadow DOM in Chrome. Il commento nelle specifiche è il giusto contenuto in Shadow DOM viene eseguito una volta al massimo una volta.

Qui ci sono un paio di idee che potrebbe essere utile, a seconda di cosa esattamente si sta cercando di raggiungere:

Firefox ha una funzione sperimentale in cui an element can be used as a background. Questo è collegato in CSS utilizzando background: -moz-element(#foo); dove foo è l'ID dell'elemento che si desidera copiare. L'immagine è "live"; le modifiche all'elemento si riflettono ovunque siano usate come sfondo.

L'utilizzo di -moz-element presenta alcuni potenziali svantaggi: è implementato solo in alcune versioni di Firefox; è sperimentale, il che significa che la funzione potrebbe cambiare o sparire ad un certo punto; e la copia non è interattiva: non è possibile fare clic sui pulsanti lì, il passaggio del mouse sulla copia non attiva gli stili :hover e così via.

Se si desidera che tutte le copie siano interattive, utilizzare Mutation Observers. C'è a library called Mutation Summary che include Mutation Observers e include an example Chrome extension che rispecchia un'intera pagina. Potresti adattarlo per rispecchiare un sottoalbero del DOM. A seconda della tua applicazione potresti anche usare Mutation Observers per specchiare il DOM in modo bidirezionale.