浏览器兼容性Polymer [英] Browser compatibility of Polymer
问题描述
我开始使用Polymer 1.0：我尝试的唯一一个简单的模板是这样：
I am starting to use Polymer 1.0: the only thing I tried is a simple template like this:
<!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上正常工作，除了即使我不将布尔星
This code works fine on Chrome and Opera, except that even if I don't put the boolean star in pres-test, it still shows the star.
在Firefox和IE中，它只显示预测试中的h1和img。
In Firefox and IE, it just shows the h1 and img in the pres-test.
在Safari中，它似乎不理解像dom模块，模板或预测试这样的标签，因为它首先显示了dom模块中的内容，
In Safari it seems that it doesn't understand the tags like dom-module, template or pres-test, since it first displays what is in the dom-module, then what is in pres-test, without adapting to the variables.
我寻找了Polymer的兼容性，但我只找到版本0.5。
I looked for the compatibility of Polymer, but I only found it for the version 0.5.
我做错了，还是只是与这些浏览器不兼容？
Am I doing something wrong, or is it just not compatible with these browsers?
推荐答案
在主文档中具有内联自定义元素定义。
Only Chrome supports having custom element definitions inline in your main document. Other browsers currently do not have full and proper implementations of the new and upcoming standard.
以 pres-test 为例，其他浏览器目前尚未全面正确实施新的和即将推出的标准。元素定义并将其移动到自己的HTML文件，然后导入它。
Take the pres-test element definition and move it into its own HTML file, then import it.
此外，您只需要导入一个webcomponents.js polyfills - 您将需要使用 webcomponents-lite.js 。
Also, you only need to import one of the webcomponents.js polyfills - and for Polymer 1.0, you'll want to use webcomponents-lite.js.
：
index.html ：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="pres-test.html">
<title>Polymer test1</title>
</head>
<body unresolved>
<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>
pres-test.html ：
pres-test.html:
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/iron-icons/iron-icons.html">
<dom-module id="pres-test">
<template>
<content></content>
<p>This is my name:<h3>{{name}}</h3></p>
<iron-icon icon="star" style$="{{getStarStyle(star)}}"></iron-icon>
<img src="http://placehold.it/300x100"></img>
</template>
</dom-module>
<script>
Polymer({
is:'pres-test',
properties:{
name: {
type: String
},
star: {
type: Boolean,
value: false
}
},
getStarStyle: function(star) {
return star ? '' : 'display: none';
}
});
</script>
这篇关于浏览器兼容性Polymer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
