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"];
    ElementB item = new ElementB(); //item has an id of "bid"

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.


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)

Leave a Reply

Your email address will not be published. Required fields are marked *