Selecting a Dynamically Created Element Polymer 1.0 Safari

Question

I am trying to append two child nodes to a carousel in Polymer. This works fine in Chrome, but I get the following console error in Safari:

TypeError: null is not an object (evaluating 'this.$$('#' + this.slideId1 + '').appendChild' )

Is there a way to select a dynamically created node by Id in Safari?

I am currently using this.$$() Polymer method.

<l2t-paper-slider id="paperSlider" total-slides="{{slides}}"></l2t-paper-slider>

<script>
  Polymer({...
    _appendNode: function() {
      this.$$('#paperSlider').appendChild(this.slide);
      this.$$('#' + this.slideId1 + '').appendChild(this.slideData);
    }
  });
</script>

Answer 1

Have you tried using:

Polymer.dom(this.root).querySelectorAll("paper-card");

In your case:

Polymer.dom(this.root).querySelectorAll("#paperSlider").appendChild(this.slide);

Remember that appendChild expects a node so you might need to create one first

var mypaperSlider = Polymer.dom(this.root).querySelector('#paperSlider');
var slide = document.createElement('paper-slide');
Polymer.dom(this.root).querySelectorAll("#paperSlider").appendChild(slide);