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或pres-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

1 个答案: