Question

已经有this question和this question，但虽然这两个问题都会触发相同的错误，但它们的解决方案和原因并不相同。我有一个标签，可以在应用程序的整个生命周期内异步加载内容。该内容又包含导致错误的自定义元素。下面是重现此错误的最简单的测试用例（假设Polymer安装了bower，否则导入会略有不同）：

base.html文件

<link rel="import" href="bower_components/polymer/polymer.html">
<link href="asynchronousTag.html" rel="import">
<asynchronous-tag></asynchronous-tag>

asynchronousTag.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-tooltip/core-tooltip.html">
<polymer-element name="asynchronous-tag">
    <template>
        <div id="text"></div>
    </template>
    <script>
        Polymer({
            ready:function(){
                var that = this;
                setTimeout(function(){
                     that.$.text.innerHTML = 
                                 '<core-tooltip label="testing">tester</core-tooltip>';
                }, 2500);
            }
        });
    </script>
</polymer-element>

触发错误

core-tooltip上的属性是在Polymer升级元素之前绑定的数据。这可能导致不正确的绑定类型。

尽管按预期工作。当<core-tooltip>属性较少时也会发生同样的情况。但是，使用

插入相同节点时会发生不

var ct = document.createElement("core-tooltip");
ct.innerHTML = "html";
ct.setAttribute("label","text");
that.$.text.appendChild(ct);

但遗憾的是，由于我的内容是完整的HTML字符串，因此无法帮助我。

我担心的原因是所讨论的功能的性能低于标准，所以我希望解决导致错误的问题可能会改善这一点（除了我和＃39; d不希望在控制台上显示任何错误。

Answer 1

在写完我的问题之后，我正在浏览Polymer邮件组并遇到this mailing。其中有人说

但是Element.innerHTML不会触发生命周期回调，也不会升级。

换句话说，解决方案是

var div = document.createElement("div");
div.innerHTML = '<core-tooltip>tester</core-tooltip>';
that.$.text.appendChild(div.childNodes[0]);

是的，根本没有任何意义......这就是我毕竟与世界分享的原因。

异步插入包含自定义元素的内容

1 个答案: