Polymer 1.0 on firefox ReferenceError: Polymer is not defined

Question

您好，我在 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 的 Polyfill 会处理 html 导入。但它不起作用。在 firefox 中，我收到以下错误：

ReferenceError: Polymer is not defined

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

我做错了什么吗？我怎样才能完成这项工作？

我还尝试删除 webcomponents 并运行ing 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

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

谢谢

Answer 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 文件中导入 'remove'。最好的方法是定义一个 elements.html 文件，将所有元素（包括测试元素）导入 elements.html 文件并将 elements.html 文件导入 index.html 文件。同样在每个元素文件中（如 test-element.html）确保导入所有依赖项。我建议您从 polymer-starter-kit

开始

Polymer 1.0 on firefox ReferenceError: Polymer is not defined

Polymer 1.0 on firefox ReferenceError: Polymer is not defined

firefox

polymer

web-component

polyfills

html-imports