Dynamische Anhängen Kindelement auf Laden in Polymer 2.0

Question

Ich versuche, auf Polymer 2.0 zu aktualisieren, und ich kann nicht scheinen, Kindelemente auf die Belastung eines Elternelements anhängen, wie ich in 1.X. Zuvor glaube ich, ich habe gerade den Rückruf ready verwendet, aber es scheint, dass alle Rückrufe geändert haben.

Gesehen here in der Rückrufverträge haben Abschnitt geändert.

Ich habe versucht, läuft

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

auf ready und attached, doch scheint es, die Linie zu Ausführung vor parent-element selbst erstellt wird. Dies führt zu einer Ausnahme:

TypeError: Cannot read property 'appendChild' of null 

ich auch

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

versucht habe, mit denen container die id einer leeren <div> innerhalb des übergeordneten Elements ist, aber ich habe das gleiche Problem. Ich bin ziemlich neu in Polymer, also, wenn es eine bessere Methode oder Struktur gibt, die ich verwenden kann, um zu bekommen, was ich brauche, lass es mich wissen.

Answer 1

Vom 1.x -> 2.x upgrade guide:

• Für Standard-DOM-Operationen, entfernen Sie die Polymer.dom() Wrapper.
• Verwenden Sie this.shadowRoot anstelle von Polymer.dom (this.root).

ready() Der Rückruf ist nun asynchron (Mikrotaskanalysierer) aufgrund der WebComponents v1 spec. Um dies zu verringern, verwenden Sie settimeout, was eine andere Aufgabe auf Browserebene ist und nach Mikrotasks ausgeführt wird. Source of next code block.

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

Wenn Sie in Aufgaben und Mikrotasks this blog post is a great read graben möchten.