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.
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. –
@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. –
@ 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