Ale*_*dro 3 firefox web-component polyfills polymer 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/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并运行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>
和元素文件:
<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是否正确的方法呢？
谢谢
Sri*_*rik 10
尝试在addEventListener('WebComponentsReady',function(){})下包装你的javascript.
addEventListener('WebComponentsReady', function() {
Polymer({
is: "test-element"
});
})
这将确保为不支持它的浏览器完成webcomponents polyfill.如果使用html import导入元素,则不需要事件侦听器.有关更多详细信息,请参阅https://github.com/webcomponents/webcomponentsjs#webcomponentsready.
对编辑的响应: 在您的test-element文件中导入polymer.html并从index.html文件中"删除"它.最好的方法是定义elements.html文件,将所有元素(包括test-element)导入element.html文件,并将elements.html文件导入index.html文件.此外,在每个元素文件(如test-element.html)中,请确保导入所有依赖项.我建议你从聚合物启动器套件开始
| 归档时间： |
|
| 查看次数： |
4035 次 |
| 最近记录： |