Firefox 上的 Polymer 和 Disqus：Window.getComputedStyle 的参数 1 未实现接口元素

Question

我目前正在使用 Polymer 框架和 Jekyll 构建网站。我在页面底部添加了 Disqus 块，它在 Chrome 浏览器中完美运行。

{% if site.disqus %}
<div class="comments">
    <div id="disqus_thread"></div>
    <script type="text/javascript">

        var disqus_shortname = '{{ site.disqus }}';
        var disqus_identifier = "{{ page.url }}";

        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
{% endif %}

但是当我在 Firefox 35.0.1 上打开它时，我在控制台中收到以下消息：

TypeError: Argument 1 of Window.getComputedStyle does not implement interface Element.

和 Disqus 评论未加载。我在 Polymer docs website 上的 Disqus 条评论中发现了相同的行为，因此您可以检查一下。任何想法如何解决？或者这是一个错误？

Answer 1

我运行遇到了这个确切的问题，并遇到了这个线程：

https://github.com/webcomponents/webcomponentsjs/issues/89

Mikanoshi 在线程末尾提供了一个有用的要点来说明修复：

var disqus_shortname = ''; /* Your shortname */
var DISQUS = ...           /* From the start of DISQUS' embed.js */

(function(document) {
    DISQUS.define(...      /* The rest of DISQUS' embed.js */
})(wrap(document));

不幸的是我们必须修改 DISQUS' embed.js，但它似乎有效！

此处解释了为什么需要这样做：http://webcomponents.org/polyfills/shadow-dom/（包裹和展开）。

Firefox 上的 Polymer 和 Disqus：Window.getComputedStyle 的参数 1 未实现接口元素

Polymer and Disqus on Firefox: Argument 1 of Window.getComputedStyle does not implement interface Element

firefox

disqus

jekyll

polymer