在Polymer 2.0中动态附加子元素

Question

我正在尝试升级到Polymer 2.0，我似乎无法像在1.X中一样在父元素的负载上追加子元素。 以前，我认为我刚刚使用了ready回调，但似乎所有的回调都发生了变化。

在Callback合同中看到这里 改变了部分。

我试过跑步

document.getElementById("parent-element").appendChild(document.createElement("child-element"));

ready并attached ，但它似乎是在创建parent-element之前执行该行。 这会导致异常：

TypeError: Cannot read property 'appendChild' of null

我也试过用

this.$.container.appendChild(document.createElement("child-element"));

其中container是父元素中空<div>的id ，但我遇到了同样的问题。 我是Polymer的新手，所以如果有更好的方法或结构我可以用来获得我需要的东西，请告诉我。

Answer 1

从1.x - > 2.x 升级指南 ：

• 对于标准DOM操作，请删除Polymer.dom（）包装器。
• 使用this.shadowRoot代替Polymer.dom（this.root）。

由于webcomponents v1 spec， ready()回调现在是异步的（微任务）。 要缓解这种情况，请使用settimeout ，这是浏览器级别的另一项任务，并在微任务之后运行。 下一个代码块的来源 。

ready() {
  super.ready();
  setTimeout(function() {
    var distributedNodes = this.$.slot.assignedNodes({flatten: true});
    console.log(distributedNodes);
  }.bind(this), 0);
}

如果你想深入研究任务和微任务， 这篇博文是一篇很好的阅读 。