Cross browser 聚合物的相容性_Cross Browser_Polymer_Compatibility_Polymer 1.0

Cross browser 聚合物的相容性

polymer

Cross browser 聚合物的相容性,cross-browser,polymer,compatibility,polymer-1.0,Cross Browser,Polymer,Compatibility,Polymer 1.0,我开始使用Polymer 1.0：我唯一尝试的是这样一个简单的模板： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> <script src="bowe

我开始使用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>


聚合物测试1
这是我的名字：{{name}
聚合物({
is:‘预试验’，
特性：{
名称：String，
星型：布尔型
}
});
例1：
例子：
无星图标：（）

这段代码在Chrome和Opera上运行良好，只是即使我没有在pres测试中使用布尔星，它仍然显示该星

在Firefox和IE中，它只是在pres测试中显示h1和img

在Safari中，它似乎不理解dom模块、模板或pres测试等标记，因为它首先显示dom模块中的内容，然后显示pres测试中的内容，而不适应变量

我寻找了聚合物的兼容性，但我只在版本0.5中找到了它

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

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

获取

prestest

元素定义并将其移动到自己的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>

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

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

获取

prestest

元素定义并将其移动到自己的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>

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

您是否正在使用

webcomponents lite.js

polyfill？e、 g.

另外，请确保在单独的文件中定义自定义元素，然后将其导入页面。我刚才使用的是webcomponents.min.js，我添加了webcomponents-lite.min.js。现在Firebug显示TypeError:t.log.split不是一个函数。我有相同的html页面中的元素，因为这只是一个简短的测试，但它会影响浏览器的显示？有趣的。。。你介意把整页的代码都写出来吗？我想知道这个片段是否有遗漏的地方。另外，是的，因为polyfill是不同步的（与本机HTML导入不同），这可能会影响在没有本机支持的浏览器中的显示。关于浏览器，好吧，但我想这对Firefox甚至IE来说都不是问题，对吧？这似乎是阻止元素显示的原因。另外，我刚刚更新了代码并修复了属性定义-star属性现在应该可以正常工作了。您使用的是

webcomponents lite.js

polyfill吗？e、 g.

另外，请确保在单独的文件中定义自定义元素，然后将其导入页面。我刚才使用的是webcomponents.min.js，我添加了webcomponents-lite.min.js。现在Firebug显示TypeError:t.log.split不是一个函数。我有相同的html页面中的元素，因为这只是一个简短的测试，但它会影响浏览器的显示？有趣的。。。你介意把整页的代码都写出来吗？我想知道这个片段是否有遗漏的地方。另外，是的，因为polyfill是不同步的（与本机HTML导入不同），这可能会影响在没有本机支持的浏览器中的显示。关于浏览器，好吧，但我想这对Firefox甚至IE来说都不是问题，对吧？这似乎是阻止元素显示的原因。另外，我刚刚更新了我的代码并修复了属性定义-star属性现在应该可以按预期工作了。它工作得很好，我使用了Polymer项目网站上的示例，但是您的版本可以工作。非常感谢。它工作得很好，我使用了Polymer项目网站上的例子，但是你的版本工作得很好。非常感谢。