Polymer 的浏览器兼容性

Question

我开始使用 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或pre-test等标签，因为它首先显示dom-module中的内容，然后是什么正在预测中，未适应变数

我查找了 Polymer 的兼容性，但我只找到了 0.5 版本。

是我做错了什么，还是它与这些浏览器不兼容？

Answer 1

只有 Chrome 支持在主文档中嵌入自定义元素定义。其他浏览器目前没有完全正确地实现新的和即将推出的标准。

获取 pres-test 元素定义并将其移动到自己的 HTML 文件中，然后导入它。

此外，您只需导入 webcomponents.js polyfills 之一 - 对于 Polymer 1.0，您需要使用 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:

<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 的浏览器兼容性

Browser compatibility of Polymer

cross-browser

polymer

compatibility

polymer-1.0