我开始使用 Polymer 1.0:我唯一尝试过的是一个简单的模板,如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html"></link>
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<title>Polymer test1</title>
</head>
<body unresolved>
<dom-module id="pres-test">
<template>
<content></content>
<p>This is my name:<h3>{{name}}</h3></p>
<iron-icon icon="star" hidden="{{!star}}"></iron-icon>
<img src="http://placehold.it/300x100"></img>
</template>
</dom-module>
<script>
Polymer({
is:'pres-test',
properties:{
name:String,
star:Boolean
}
});
</script>
<pres-test name="withStar" star>
<h1>Example1:</h1>
<img src="http://placekitten.com/g/200/180" alt="image"></img>
</pres-test>
<pres-test name="withoutStar">
<h2>Example:</h2>
<img src="http://placesheen.com/100/100"></img>
<p>No star icon :()</p>
</pres-test>
</body>
</html>
这段代码在 Chrome 和 Opera 上运行良好,除了即使我没有将布尔星号放在预测试中,它仍然显示星号。
在 Firefox 和 IE 中,它只是在预测试中显示 h1 和 img。
在 Safari 中,它似乎不理解 dom-module、template 或 pres-test 之类的标签,因为它首先显示 dom-module 中的内容,然后显示 pres-test 中的内容,而不适应变量。
我寻找了 Polymer 的兼容性,但我只找到了 0.5 版本。
我做错了什么,还是只是与这些浏览器不兼容?