title: How to update polymer element bindings after it was removed from DOM and inserted again
body: <p>Assume we have container polymer element and another dummy polymer element. Container polymer element has div block for inserting another polymers.</p>
  
  <p><strong>container_polymer.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;polymer-element name='container-polymer'&gt;
    &lt;template&gt;
      &lt;div id="container"&gt;
      &lt;/div&gt;
      &lt;button on-click="{{first}}"&gt;show first&lt;/button&gt;
      &lt;button on-click="{{firstPrepared}}"&gt;show first prepared&lt;/button&gt;
      &lt;button on-click="{{second}}"&gt;show second&lt;/button&gt;
    &lt;/template&gt;
    &lt;script type="application/dart" src="container_polymer.dart"&gt;
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>There are three buttons for inserting dummy polymers: </p>
  
  <ol>
  <li>First button inserts first dummy polymer into container.  </li>
  <li>Second button also inserts first dummy polymer, and calls
  <code>prepareElement()</code> on this polymer. </li>
  <li>Third button inserts second dummy polymer into container</li>
  </ol>
  
  <p><strong>container_polymer.dart</strong></p>
  
  <pre class="lang-dart prettyprint-override"><code>import 'package:polymer/polymer.dart';
  import 'dart:html';
  import 'dummy_polymer.dart';
  
  @CustomTag('container-polymer')
  class ContainerPolymer extends PolymerElement {
    PolymerElement firstPolymer, secondPolymer, currentPolymer;
    Element container;
  
    ContainerPolymer.created() : super.created();
  
    void enteredView() {
      super.enteredView();
      container = $['container'];
    }
  
    void first(Event e, var detail, Node target) {
      showFirst(false);
    }
  
    void firstPrepared(Event e, var detail, Node target) {
      showFirst(true);
    }
  
    void showFirst(bool prepare) {
      if (firstPolymer == null) {
        DummyPolymer dummyPolymer = new Element.tag("dummy-polymer");
        dummyPolymer.title = "first";
        firstPolymer = dummyPolymer;
      }
  
      if (currentPolymer != firstPolymer) {
        if (secondPolymer != null) {
          secondPolymer.remove();
        }
  
        if (prepare) {
          firstPolymer.prepareElement();  
        }
        currentPolymer = firstPolymer;
        container.children.add(firstPolymer); 
      }
    }
  
    void second(Event e, var detail, Node target){
      if (currentPolymer != secondPolymer) {
        DummyPolymer dummyPolymer = new Element.tag("dummy-polymer");
        dummyPolymer.title = "second";
        secondPolymer = dummyPolymer;
        if (firstPolymer != null) {
          firstPolymer.remove();
        }
  
        currentPolymer = secondPolymer;
        container.children.add(secondPolymer);
      }
    }
  
  }
  </code></pre>
  
  <p>Dummy polymer has several observable properties in order to test binding works. When you click inside this polymer it changes background color of root div, background color of title div and increases counter. Also it has input for detecting if state of polymer element was changed and block with white background for testing usage of parent style.</p>
  
  <p><strong>dummy_polymer.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;polymer-element name='dummy-polymer'&gt;
    &lt;template&gt;
      &lt;div style="width: 500px; height: 300px; background-color: {{color}}" on-click="{{changeColor}}"&gt;
        &lt;div id="title"&gt;
          &lt;h1&gt;{{title}}&lt;/h1&gt;
          &lt;span&gt;Clicks: {{clicks}}&lt;/span&gt;
        &lt;/div&gt;
        &lt;input type="text" /&gt;
        &lt;div class="external"&gt;Parent style block: background should be white&lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/template&gt;
  
    &lt;script type="application/dart" src="dummy_polymer.dart"&gt;
    &lt;/script&gt;
  
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p><strong>dummy_polymer.dart</strong></p>
  
  <pre class="lang-dart prettyprint-override"><code>import 'package:polymer/polymer.dart';
  import 'dart:html';
  
  @CustomTag('dummy-polymer')
  class DummyPolymer extends PolymerElement {
    @observable String color = "red";
    @observable String title;
    @observable num clicks = 0;
    Element titleElement;
  
    DummyPolymer.created() : super.created() {
      var root = getShadowRoot('dummy-polymer');
      root.applyAuthorStyles = true;
    }
  
    void enteredView() {
      super.enteredView();
      titleElement = $['title'];
    }
  
    void changeColor(Event e, var detail, Node target){
      clicks++;
  
      if (color == "red") {
        color = "green";
      } 
      else if (color == "green") {
        color = "blue";
      }
      else {
        color = "red";
      }
      titleElement.style.backgroundColor = color;
    }
  
  }
  </code></pre>
  
  <p>Test page hosted here <a href="http://dart-style-binding-test.herokuapp.com/" rel="noreferrer">http://dart-style-binding-test.herokuapp.com/</a>  </p>
  
  <p>So, to reproduce my issue do following:</p>
  
  <ol>
  <li>Click 'show first' button. Make sure clicking inside changes background color and increases counter.</li>
  <li>Type something into input field</li>
  <li>Click 'show second'</li>
  <li>Click 'show first'. Make sure first polymer has the same state as before: background color, counter and input field text.</li>
  <li>Click inside first polymer. Now it doesn't change background color and counter, but it changes background color of area at the top.</li>
  </ol>
  
  <p>Binding to observable properties doesn't work anymore. But <code>on-click</code> handler works, you can see it when background color of top area changing. It's implemented by changing element's <code>backgroundColor</code> property directly:</p>
  
  <pre class="lang-dart prettyprint-override"><code>titleElement.style.backgroundColor = color;
  </code></pre>
  
  <p><strong>So, my question is: how to update binding mechanism properly after existing polymer was inserted into DOM again?</strong></p>
  
  <p>There is one way to do it dirty using 'show first prepared' button. It calls <code>prepareElement()</code> on first element before inserting into container. So, do following:</p>
  
  <ol>
  <li>Click 'show first' button. Make sure clicking inside changes background color and increases counter.</li>
  <li>Type something into input field</li>
  <li>Click 'show second'</li>
  <li>Click 'show first prepared'. You can see input element is empty, but counter and background color are up to date. (If you run this demo in dartium also block with white color will change its background color to parent's because parent style isn't applied)</li>
  <li>Click inside first polymer. Now it changes background color and counter. Bindings work properly, but we lose text inside input field.</li>
  </ol>
  
  <p>Note: after first element had been inserted with 'show first prepared' button, bindings works well even after first element was inserted with 'show first' button. </p>
  
  <p>Code here <a href="https://github.com/petalvlad/dart-style-binding-test" rel="noreferrer">https://github.com/petalvlad/dart-style-binding-test</a></p>