Fallenreaper Fallenreaper - 4 months ago 10
Dart Question

Dynamically adding 1 PolymerElement to another shows in childNodes but not queryable?

I have 2 classes i created which extend PolymerElement, we can call them: ElementA, and ElementB.

So, i want to add ElementB to ElementA dynamically, so i was thinking to add it to the onReady call of ElementA as follows:

class ElemenetA extends PolymerElement{
ElementB get _myElement => $["bid"];
onReady(){
ElementB item = new ElementB(); //item has an id of "bid"
Polymer.dom(this).childNodes.add(item);
}
}


So when i visit the Component, each time, it will add a new ElementB to the childNodes. Its ok, i will resolve this later.

The issue i have bumped into though is that ElementB doesnt render at all and if i try to call a method from it such as open like this:
_myElement.open();
it will say
null does not have method open
.

What am i doing wrong to inject a PolymerElement into another?

My overall goal is to pull out a common element in a bunch of other Components and just use a behavior to inject this re-occurring item into the dom.

Answer

You can't access elements that are dynamically added using $[...], this works only for elements added statically to the elements HTML. Even when they are inside a <template is="dom-if"> or <template is="dom-repeat"> $[...] cant be used.

Use instead $$('#bid')