Firefox ReferenceError 上的聚合物 1.0：聚合物未定义答案

【问题标题】：Polymer 1.0 on firefox ReferenceError: Polymer is not definedFirefox ReferenceError 上的聚合物 1.0：聚合物未定义
【发布时间】：2015-10-21 17:36:24
【问题描述】：

您好，我在 Chrome 和 Opera 上有一个可用的 Polymer 1.0 网页。现在我需要该页面在 Firefox 和 Safari 中运行。我有以下测试：

<!DOCTYPE html>
<html>
    <head>
        <?php use Cake\Routing\Router; ?>
        <?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
        <link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">

        <dom-module id="test-element">
            <template >
                <h1>It works</h1>
            </template>
            <script>
                Polymer({
                    is: "test-element"
                });
            </script>
        </dom-module>
    </head>
    <body unresolved>
        <test-element></test-element>
    </body>
</html>

我尝试过改变

<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>

到

<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.js'); ?>

或

<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.min.js'); ?>

我认为 webcomponents 的 Polyfills 会处理 html 导入。但它不起作用。在 Firefox 中，我收到以下错误：

ReferenceError: Polymer is not defined

我无法使用 Safari 对其进行测试，但我希望得到类似的结果。

我做错了吗？我怎样才能做到这一点？

我还尝试删除 web 组件并运行 bower update 以再次安装它们。

谢谢

编辑：

我有两个文件。 index.html：

<!DOCTYPE html>
<html>
    <head>
        <?php use Cake\Routing\Router; ?>
        <?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.js'); ?>
        <link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">
        <?=  $this->element('Polymer/test-element');?>
    </head>
    <body unresolved>
        <test-element></test-element>
    </body>
</html>

和元素文件：

<dom-module id="test-element">
    <template >
        <h1>It works</h1>
    </template>
    <script>
        addEventListener('WebComponentsReady', function() {
            Polymer({
                is: "test-element"
            });
        });
    </script>
</dom-module>

这很好用。我的问题是如果我删除 addEventListener。 Firefox 出现同样的错误：

ReferenceError: Polymer is not defined

好像 Polyfill 没有及时加载。有没有办法解决这个问题？添加 addEventListener 是否正确？

谢谢

【问题讨论】：

标签： firefox polymer web-component polyfills html-imports

【解决方案1】：

尝试将您的 javascript 包装在 addEventListener('WebComponentsReady', function() {}) 下。

addEventListener('WebComponentsReady', function() {
            Polymer({
                is: "test-element"
            });
})

这将确保为不支持它的浏览器完成 webcomponents polyfill。如果元素是使用 html import 导入的，则不需要事件侦听器。详情请参考https://github.com/webcomponents/webcomponentsjs#webcomponentsready。

对修改的回应： 在您的测试元素文件中导入 polymer.html 并从您的 index.html 文件中“删除”它。最好的方法是定义一个 elements.html 文件，将所有元素（包括 test-element）导入到 elements.html 文件中，然后将 elements.html 文件导入到 index.html 文件中。同样在每个元素文件（如 test-element.html）中，确保导入所有依赖项。我建议你从聚合物入门套件开始

【讨论】：

不错！如果我在不同的文件中有多个 Polymer 元素怎么办？你会在每个聚合物元素中实现这个回调函数吗？在js里面？
如果您使用 html import 导入元素，则不需要事件监听器。您的 index.html 中的脚本甚至可能在 polyfill 完成之前运行，因此需要用于完成 polyfill 的事件侦听器。 html 导入只有在 polyfill 完成后才会起作用，因此 html 导入中的元素不会有任何问题。
它可以将它添加到圆顶模块中。现在，您说的是“这仅在 index.html 文件和非 Chrome 浏览器中是必需的。”我该如何处理它仅在浏览器需要时才运行？
您可以在 chorme 浏览器中设置事件监听器，它会起作用。我只是想说明 webcomponents polyfill 应该为非 Chrome 浏览器完成。即使对于 chrome 浏览器也会触发此事件侦听器，因此没有问题。
感谢您的帮助！我已经编辑了我的问题。你能看看吗？再次感谢您！