javascript - htmlelement - web components programa
webcomponents.js polyfills no funciona: Safari y Firefox (1)
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 obtener 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 solicitud de extracción en el github.
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 consola me da null . Es posible que el resto 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!