我正在尝试通过webcomponents.js polyfills使用自定义Web组件。我一直在使用https://github.com/webcomponents/hello-world-element中的<hello-world>元素
Safari和Firefox无法显示任何内容，并给我以下错误:
Safari:TypeError: null is not an object (evaluating 'thisDoc.querySelector('template').content')
Firefox:TypeError: thisDoc.querySelector(...) is null
问题出在哪里:
我修改了hello-world.html。现在，它记录模板querySelector的结果:// Gets content from <template>console.log('thisDoc.querySelector("template")', thisDoc.querySelector('template'));var template = thisDoc.querySelector('template').content;
控制台输出为我提供了null。
这可能就是为什么其余代码无法正常工作的原因。有任何想法吗？
我的系统:Safari: Version 8.0 (10600.1.25.1)Firefox: 31.0OS: OS X Yosemite 10.10.1 (14B25)
我还在github上发布了一个问题:
https://github.com/webcomponents/hello-world-element/issues/7#issuecomment-65321859
有谁知道一种解决方案，以使polyfills在Safari/Firefox中工作？谢谢!
最佳答案
我找到了解决问题的方法。现在，您可以将Web组件与Chrome上的 native API以及Firefox和Safari上的polyfill一起使用。
只需更新此行:var thisDoc = (thatDoc.currentScript || thatDoc._currentScript).ownerDocument;至var thisDoc = (thatDoc._currentScript || thatDoc.currentScript).ownerDocument;为什么这样做？
_currentScript来自polyfills，允许您获取正确的ownerDocument来查询<template>。如果不存在polyfill，则上面的代码将改用currentScript，该代码在Chrome上可用。
我已经在github上发出了Pull请求。
关于javascript - webcomponents.js polyfills无法使用: Safari & Firefox，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27291660/