webcomponents.js polyfills不工作：Safari＆amp;火狐

Question

我正在尝试使用webcomponents.js polyfill使用自定义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.0 OS: OS X Yosemite 10.10.1 (14B25)

我还在github发布了一个问题： https://github.com/webcomponents/hello-world-element/issues/7#issuecomment-65321859

有没有人知道让polyfills在Safari / Firefox中运行的解决方案？谢谢！

Answer 1

我找到了问题的解决方案。您现在可以将Web组件与Chrome上的本机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请求。