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

Issue

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.

Solution

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')

Answered By – Günter Zöchbauer

Answer Checked By – Senaida (FlutterFixes Volunteer)