2013-03-20 6 views
19

La bozza DOM W3C Shadow può essere polyfilled in JavaScript fornendo funzioni personalizzate per la ricerca e l'attraversamento del DOM? È stato fatto? I tentativi che ho trovato sono stati shim piuttosto miti e sembrano non fare molti sforzi per emulare le specifiche.In che misura il DOM ombra può essere emulato usando un polyfill?

Apprezzo che questo non sia un compito facile, ma sicuramente qualcuno ha dato una considerazione approfondita?

+0

Non riesco a immaginare come funzionerebbe, dato che Shadow DOM sta esponendo l'interfaccia utente interna del browser che non è stata disponibile fino a questo punto. Una soluzione avrebbe bisogno di replicare completamente il comportamento dell'interfaccia utente del browser da zero. –

+1

@Matt Stone - Un'idea potrebbe essere quella di fare in modo che i CSS nascondano gli elementi dom che fanno parte della dom shadow e modificano le funzioni di query del DOM Javascript (ad esempio getElementById) in modo che non vengano restituiti elementi DOM nascosti. Naturalmente, c'è molto di più e un polyfill avrebbe ovviamente dei limiti. –

+0

@ PatriciaBrothers: potrebbe essere emulato usando frammenti di documento o rimuovendo i componenti ombra dal DOM e inserendoli, diciamo, in un div. Dubito che questa roba sia ampiamente implementata e quindi non ne ho molto bisogno. – RobG

risposta

26

Ho lavorato su questo problema esatto negli ultimi mesi.

Linea di fondo c'è un polyfill che funziona^su sempreverdi browser qui https://github.com/Polymer/ShadowDOM

^polyfilling di funzioni CSS come @macchina non sono in là ancora, presto

Quindi, sì, è un cosa difficile da polyfill, in particolare perché dobbiamo inventare alberi DOM secondari. Abbiamo cercato di renderlo il più user-friendly possibile, il che ha richiesto l'uso di una tecnica di wrapping piuttosto invasiva.

In altre parole, se si div = document.createElement('div'), si ottiene una cosa simile a un DIV e funziona come un DIV, ma in realtà è un oggetto Wrapper. L'obiettivo finale, naturalmente, è che il tuo codice abbia lo stesso aspetto sia che funzioni sotto il polyfill o sotto un'implementazione nativa.

Non è al 100% a prova di proiettile, in particolare, non è possibile per noi avvolgere document per voi, in modo da avere a che fare da soli, a la:

wrap(document).querySelector(...) 

A parte il problema document, gli involucri sono destinato a funzionare in modo trasparente. Questo è tutto nuovo di zecca, quindi mi scuso per la mancanza di documenti. Stiamo lavorando su questo mentre parliamo.

Si prega di file issues se avete domande o problemi, ci piace ricevere feedback. C'è anche un canale email per discutere di questo polyfill (e degli altri polyfill in quell'org) a [email protected]

dubito questa roba è ampiamente implementata

Vero, ma è in Chrome, almeno.

+0

Wow, Scott. È incredibile Presumo che questo sarebbe (sarà) un successo se presenti questo att I/O di Google. Se i componenti Web possono essere polifivati ​​con successo in qualsiasi forma o modulo su IE9/10, il fornitore del browser che non deve essere nominato sarà costretto a saltare sulle tue proposte W3C belle e consigliate. Altrimenti ci sono molte ragioni e forze al lavoro per rendere questo un altro WebGL o Dart.Ciò renderà la maggior parte degli ISV destinati al Web piuttosto che al desktop per molte categorie di applicazioni. –

+1

Lo spessore è molto impressionante ... Mi chiedo, è un'opzione valida per i siti web che devono essere ottimizzati per i dispositivi mobili? Sono sicuro che ci deve essere un colpo di prestazioni coinvolto nel mantenimento del DOM ombra. –

+1

Sì, c'è un costo delle prestazioni per DOM shadow di polyfilling, ma non abbiamo ancora numeri rigidi. Tutto lo sviluppo è all'esterno, quindi condivideremo tutti i dati che generiamo. La speranza è che, se utilizzati in concerto con altre tecnologie come Custom Elements e MDV, i pattern di utilizzo tenderanno a provocare meno frequentemente il polyfill. –

Problemi correlati