Polymer 的浏览器兼容性答案

【问题标题】：Browser compatibility of PolymerPolymer 的浏览器兼容性
【发布时间】：2015-08-27 12:25:07
【问题描述】：

我开始使用 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 中，它只是在 pres-test 中显示 h1 和 img。

在 Safari 中，它似乎不理解 dom-module、template 或 pres-test 等标签，因为它首先显示 dom-module 中的内容，然后显示 pres-test 中的内容，而不适应变量。

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

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

【问题讨论】：

你在使用webcomponents-lite.js polyfill吗？例如<script src="components/webcomponentsjs/webcomponents-lite.min.js"></script> 另外，请确保您在单独的文件中定义自定义元素，然后将其导入您的页面。
我只是在使用 webcomponents.min.js，我添加了 webcomponents-lite.min.js。现在 Firebug 显示 TypeError: t.log.split is not a function。我在同一个html页面中有元素，因为它只是一个简短的测试，但它会影响浏览器的显示？
有趣...您介意为整个页面提供代码吗？我想知道 sn-p 是否遗漏了一些东西。另外，是的，因为 polyfill 不是同步的（与原生 HTML 导入不同），这可能会影响在没有原生支持的浏览器中的显示。
感谢您的回答，我完成了代码。关于浏览器，好吧，但我想这对 Firefox 甚至 IE 来说都不是问题，对吧？
这似乎是阻止元素显示的原因。此外，我刚刚更新了我的代码并修复了属性定义 - 星属性现在应该可以正常工作了。

标签： cross-browser polymer compatibility polymer-1.0

【解决方案1】：

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

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

此外，您只需导入其中一个 webcomponents.js 填充物 - 对于 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-Project 网站上的示例，但是您的版本可以使用。谢谢！