Fatal编程技术网
  • javascript/
  • Javascript webcomponents.js不工作：Safari&；火狐

Javascript webcomponents.js不工作：Safari&；火狐

javascript web

Javascript webcomponents.js不工作：Safari&；火狐,javascript,web,web-component,Javascript,Web,Web Component,我正在尝试使用webcomponents.jspolyfills使用自定义Web组件。我一直在使用来自的元素 Safari和Firefox将不显示任何内容，并显示以下错误： Safari:TypeError:null不是对象（正在评估'thisDoc.querySelector（'template'）.content'） Firefox:TypeError:thisDoc.querySelector（…）为null 问题在于： 我修改了helloworld.html。现在，它将记录模板查询选择器

我正在尝试使用
webcomponents.js
polyfills使用自定义Web组件。我一直在使用来自的
元素

Safari和Firefox将不显示任何内容，并显示以下错误： Safari:
TypeError:null不是对象（正在评估'thisDoc.querySelector（'template'）.content'）

Firefox:
TypeError:thisDoc.querySelector（…）为null

问题在于： 我修改了
helloworld.html
。现在，它将记录模板查询选择器的结果：

//从中获取内容
console.log（'thisDoc.querySelector（'template'）、thisDoc.querySelector（'template'）；
var template=thisDoc.querySelector（'template'）。内容

控制台输出给我
null

这可能就是代码其余部分无法工作的原因。有什么想法吗

我的系统：

Safari:8.0版（10600.1.25.1）
Firefox:31.0
OS:OS X约塞米蒂10.10.1（14B25）

我还在github上发布了一篇文章：



有人知道一种让polyfills在Safari/Firefox中工作的解决方案吗？谢谢大家!
 我找到了解决这个问题的办法。现在，您可以在Chrome上使用带有本机API的Web组件，在Firefox和Safari上使用带有polyfills的Web组件

只需更新此行：


var thisDoc=（thatDoc.currentScript | | thatDoc._currentScript）.ownerDocument

到


var thisDoc=（thatDoc.|currentScript | thatDoc.currentScript）.ownerDocument

为什么这样做有效？
_currentScript来自polyfills，允许您获取正确的ownerDocument以从中查询
。如果polyfills不存在，则上面的代码将改为使用在Chrome上可用的currentScript


我已经在github上提出了一个拉取请求。
同样的问题也发生在Chrome for iPad上，这与Mac/Windows/Linux/Android上的Chrome不同。下面的修复程序也适用于Chrome for iPad。