NeonAnimatable element does not appear when added programmatically to the NeonAnimatedPages

[kitsune0408]

NeonAnimatable element is not added programmatically to already existing NeonAnimatedPages.

Here's the html code:

<paper-button on-click = "addPage">Add page</paper-button>

<neon-animated-pages id = "mainPages" selected ="0"
                                 entry-animation="slide-from-right-animation"
                                 exit-animation="slide-left-animation">

    <neon-animatable on-click = "goToNextPage">Page One</neon-animatable>
    <neon-animatable on-click = "goToNextPage">Page Two</neon-animatable>

</neon-animated-pages>

Basically every time the button is clicked, a new page should be added. And it is added as a child, but still doesn't appear on the web page. The rotation I do with the goToNextPage method does not include new pages and continues to switch between the first two pages which are initially put into html file.

Dart code:

@PolymerRegister('pages-test')
class Pages extends PolymerElement {
  NeonAnimatedPages mainPages;

  Pages.created() : super.created() {
    mainPages = querySelector("#mainPages") as NeonAnimatedPages;
  }

  @reflectable
  void goToNextPage(event, [_]) {
    mainPages.selectNext();
  }

  @reflectable
  void addPage(event, [_]) {
    NeonAnimatable newPage = new NeonAnimatable();
    newPage.text = "New page";
    newPage.onClick.listen(goToNextPage);
    mainPages.children.add(newPage);
  }
}

pubspec.yaml:

environment:
  sdk: '>=1.9.0 <2.0.0'

dependencies:
  browser: ^0.10.0
  polymer_elements: ^1.0.0-rc.3
  polymer: ^1.0.0-rc.6
  reflectable: ^0.3.3
  web_components: '>=0.11.3 <0.13.0'
  polymer_interop: ^1.0.0-rc.5

Is that a bug or am I missing something?

[jakemac53]

You have to use the Polymer dom apis when manipulating the dom of Polymer elements in order to ensure that all side effects are taken into account. In this case that would look like this:

Polymer.dom(mainPages).appendChild(newpage);