webcomponents.js polyfills无法正常工作:Safari和Firefox

Question

我正在尝试使用webcomponents.jspolyfill 使用自定义Web组件.我一直在使用https://github.com/webcomponents/hello-world-element中的<hello-world>元素

Safari和Firefox不会显示任何内容并给我以下错误:

苹果浏览器: TypeError: null is not an object (evaluating 'thisDoc.querySelector('template').content')

火狐: 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 来自polyfill，允许您获取正确的ownerDocument 来查询<template>。如果polyfills不存在，上面的代码将使用currentScript，它在Chrome上可用。

我已经在 github 上提出了 Pull 请求。