发表新帖
发表新帖

Browser compatibility of Polymer

前端 未结
关注
1 1427
刺人心
刺人心 2020-12-22 02:47

I am starting to use Polymer 1.0: the only thing I tried is a simple template like this:
相关标签:
1条回答
  • 野性不改
    2020-12-22 03:33

    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.

    Take the pres-test element definition and move it into its own HTML file, then import it.

    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.

    All said and done you'll have two files:

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题