Polymer 2.0の読み込み時に子要素を動的に追加します

Question

Polymer 2.0にアップグレードしようとしていますが、1.Xのように親要素の読み込みに子要素を追加できないようです。以前は、私はちょうどreadyコールバックを使用したと思いますが、すべてのコールバックが変更されたようです。

のhereがコールバック契約がセクションに変更されました。

私はreadyとattachedに

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

を実行しようとしました、まだそれはparent-elementがさえ作成される前にラインを実行しているようです。これは、例外が発生します。

TypeError: Cannot read property 'appendChild' of null 

私はまたcontainerは親要素の内部空<div>のidですが、私は同じ問題を取得し

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

を使用してみました。私はPolymerにはかなり新しいので、必要なものを手に入れるための方法や構造があれば教えてください。 1.xから

Answer 1

- > 2.xのupgrade guide：標準のDOM操作について

• 、Polymer.dom（）のラッパーを削除します。
• Polymer.dom（this.root）の代わりにthis.shadowRootを使用します。

ready()コールバックが原因webcomponents V1仕様に（マイクロタスク）が非同期です。これを軽減するには、settimeoutを使用します。これはブラウザレベルで別のタスクであり、マイクロタスク後に実行されます。 Source of next code block。

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

タスクとマイクロタスクを掘り起こす場合はthis blog post is a great readです。