Fatal编程技术网
  • firefox/
  • firefox ReferenceError上的Polymer 1.0：未定义Polymer

firefox ReferenceError上的Polymer 1.0：未定义Polymer

firefox polymer

firefox ReferenceError上的Polymer 1.0：未定义Polymer,firefox,polymer,web-component,polyfills,html-imports,Firefox,Polymer,Web Component,Polyfills,Html Imports,你好，我有一个关于Chrome和Opera的Polymer 1.0网页。现在我需要在Firefox和Safari中运行该页面。我有以下测试： <!DOCTYPE html> <html> <head> <?php use Cake\Routing\Router; ?> <?php echo $this->Html->script('/bower_components/webcomponent

你好，我有一个关于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>
我还没能用Safari测试它，但我希望得到类似的结果

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

我还尝试删除webcomponents并运行bower更新以再次安装它们

多谢各位

编辑：

我有两个文件。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>
就好像没有及时加载多边形填充一样。有办法解决这个问题吗？添加addEventListener是正确的方法吗

谢谢

尝试将javascript包装在addEventListener（'WebComponentsReady'，function（）{}）下

这将确保webcomponents polyfill在不支持它的浏览器中完成。如果使用html导入导入元素，则不需要事件侦听器。有关更多详细信息，请参阅

编辑响应：
在测试元素文件中导入polymer.html并将其从index.html文件中“删除”。最好的方法是定义elements.html文件，将所有元素（包括测试元素）导入elements.html文件，并将elements.html文件导入index.html文件。此外，在每个元素文件（如test element.html）中，确保导入所有依赖项。我建议您从聚合物起动器套件开始

不错！如果我在不同的文件中有几个聚合物元素呢？你会在每个聚合物元素中实现这个回调函数吗？在js内部？如果使用html导入导入元素，则不需要事件侦听器。index.html中的脚本甚至可能在polyfill完成之前运行，因此需要使用事件侦听器来完成polyfill。html导入只有在polyfill完成后才能工作，因此html导入中的元素不会有任何问题。它可以在dome模块中添加它。现在，您说的是“这仅在index.html文件和非chrome浏览器中是必需的。”我如何处理它仅在浏览器需要时运行？您可以在chrome浏览器中使用事件侦听器，它将正常工作。我只是想指出，对于非chrome浏览器，webcomponents polyfill应该是完整的。即使是chrome浏览器也会触发此事件侦听器，因此没有问题。感谢您的帮助！我已经编辑了我的问题。你能看一下吗？再次感谢你！ 
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.js'); ?>

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

ReferenceError: Polymer is not defined

<!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>

ReferenceError: Polymer is not defined

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