webcomponents.js polyfills no funciona: Safari y Firefox

webcomponents.js usar un Componente Web personalizado usando los polyfills webcomponents.js . He estado usando el elemento <hello-world> de https://github.com/webcomponents/hello-world-element

Safari y Firefox no mostrarán nada y me darán los siguientes errores:

Safari: TypeError: null is not an object (evaluating 'thisDoc.querySelector('template').content')

Firefox: TypeError: thisDoc.querySelector(...) is null

Donde el problema es:

hello-world.html . Ahora registra el resultado de la plantilla querySelector:

// Gets content from <template> console.log('thisDoc.querySelector("template")', thisDoc.querySelector('template')); var template = thisDoc.querySelector('template').content;

La salida de la console me da null . Es posible que el rest del código no funcione. ¿Algunas ideas?

Mi sistema:

Safari: Version 8.0 (10600.1.25.1) Firefox: 31.0 OS: OS X Yosemite 10.10.1 (14B25)

También publiqué un problema en github en: https://github.com/webcomponents/hello-world-element/issues/7#issuecomment-65321859

¿Alguien sabe una solución para que los polyfills funcionen en Safari / Firefox? ¡Gracias!

Encontré la solución para el problema. Ahora puede usar los componentes web con las API nativas en Chrome y con los polyfills en Firefox y Safari.

Simplemente actualiza esta línea:

var thisDoc = (thatDoc.currentScript || thatDoc._currentScript).ownerDocument;

a

var thisDoc = (thatDoc._currentScript || thatDoc.currentScript).ownerDocument;

¿Por qué funciona esto?

_currentScript proviene de los polyfills y le permite get el ownerDocument correcto para consultar la <template> . Si no existen polyfills, el código anterior usa currentScript, que está disponible en Chrome.

Ya hice una request de extracción en el github.