title: When is polymer property to attribute initialization done?
body: <p>I need to initialize event listeners based on object passed as a property.</p>
  
  <p>Scenario: My custom element needs to handle events from another composed polymer element, i need to do it based on params passed as a property.</p>
  
  <p>if I try to use methods ready(), attached() or domReady() this.>property_name&lt; attribute is not binded yet to property and this.getAttribute(>property_name&lt;) give me raw strings before expression evaluation, eg, {{>property_bind_expression&lt;}} not the evaluated value.</p>
  
  <p>So i need to initialize my element after attribute is evaluated and initialized from property. Or maybe get evaluated property directly or call the expression evaluation method on raw property to finish element initialization.</p>
  
  <p>How can i do that ?</p>
  
  <p>Source code on github: <a href="https://github.com/mmacedoeu/crud-form" rel="nofollow">https://github.com/mmacedoeu/crud-form</a></p>
  
  <p>demo.json:</p>
  
  <pre><code>{ "title" : "Solicitação de Crédito",
    "lovs" : [ {
    "id": "filter",
    "formid": "crud_form",
    "action": "test",
    "readonly": "no",
    "keypairs"
    : [ ["null", ""],
          ["=","igual"],
          ["contains","contém"],
          ["startwith","inicia com"],
          ["finishwith","termina com"],
          ["between","entre"]
        ]
    },
    {
      "id": "filter2",
      "keypairs"
      : [ ["=", "igual"],
          ["&gt;", "maior que"],
          ["&lt;", "menor que"],
          ["between", "entre"]
        ]
    }
  
  ],
  
    "values":
  [
    { "label": "Cliente",
      "id": "cliente",
      "length": "15",
      "mask": "\\d"
    },
    { "label": "Tipo de Solicitação",
      "id": "tiposol",
      "length": "11",
      "mask": "\\d",
      "filter": {
        "default":"finishwith",
        "lov": {
          "ref": "filter",
          "includes":"*"
        }
      }
    },
    { "label": "Segmento Financeiro",
      "id": "segfin",
      "length": "15",
      "mask": "\\d",
      "title": "Entre dígito verificador, um numeral!",
      "filter": null
    },
    { "label": "Segmento Financeiro Solicitante",
      "id":"segfinsol",
      "length": "4",
      "mask": "\\w",
      "filter": {
        "default":"contains",
        "lov": {
          "ref": "filter",
          "includes":"*"
        }
      }
    },
    { "label": "Responsável Financeiro",
      "id":"respfin",
      "mask": "\\w"
    }
  
  ]
  }
  </code></pre>
  
  <p>demo.html :</p>
  
  <pre><code>        &lt;!DOCTYPE html&gt;
  
      &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;crud-form Demo&lt;/title&gt;
  
        &lt;script src="../webcomponentsjs/webcomponents.js"&gt;&lt;/script&gt;
  
      &lt;link rel="import" href="../polymer/polymer.html"&gt;
  
      &lt;link href="../paper-input/paper-input.html" rel="import"&gt;
      &lt;link href="../core-collapse/core-collapse.html" rel="import"&gt;
      &lt;link href="../core-menu/core-menu.html" rel="import"&gt;
      &lt;link href="../paper-dropdown/paper-dropdown.html" rel="import"&gt;
      &lt;link href="../paper-item/paper-item.html" rel="import"&gt;
      &lt;link href="../paper-dropdown-menu/paper-dropdown-menu.html" rel="import"&gt;
      &lt;link href="../core-toolbar/core-toolbar.html" rel="import"&gt;
      &lt;link href="../paper-fab/paper-fab.html" rel="import"&gt;
      &lt;link href="../font-roboto/roboto.html" rel="import" &gt;
      &lt;link href="../ajax-form/ajax-form.html" rel="import" &gt;
      &lt;link href="../paper-button/paper-button.html" rel="import"&gt;
        &lt;link rel="import" href="../core-media-query/core-media-query.html"&gt;
        &lt;link rel="import" href="../core-ajax/core-ajax.html"&gt;
  
      &lt;/head&gt;
  
      &lt;body unresolved&gt;
  
  &lt;polymer-element name="crud-form" attributes="fields wide debug"&gt;
        &lt;template&gt;
          &lt;link rel="stylesheet" href="crud-form.css"&gt;
  
          &lt;template if={{debug}}&gt;
          &lt;span&gt;Responsive design wide form:  {{wide ? 'Verdadeiro' : 'Falso'}} !&lt;/span&gt;
          &lt;span&gt;lovs: &lt;/span&gt;
          &lt;/template&gt;
          &lt;template repeat="{{lov in fields.lovs}}"&gt;
            &lt;template if={{debug}}&gt;
            &lt;span&gt;ID: {{lov.id}}&lt;/span&gt;
            &lt;/template&gt;
            &lt;template repeat="{{kp in lov.keypairs}}"&gt;
              &lt;template if={{debug}}&gt;
                &lt;span&gt;keypair: {{kp[0]}} - {{kp[1]}}&lt;/span&gt;
              &lt;/template&gt;
            &lt;/template&gt;
          &lt;/template&gt;
        &lt;div id="searchPanel" class="search-panel {{ {wide: wide} | tokenList }}" flex vertical layout?="{{!wide}}"&gt;
          &lt;div class="card" flex?="{{!wide}}" vertical layout?="{{!wide}}"&gt;
            &lt;core-toolbar&gt;
              &lt;span flex&gt;{{fields.title}}&lt;/span&gt;
              &lt;template if={{!fields.readonly}}&gt;
                &lt;paper-button raised&gt;Limpar&lt;/paper-button&gt;
                &lt;paper-fab icon="add" class="yellow"&gt;&lt;/paper-fab&gt;
              &lt;/template&gt;
            &lt;/core-toolbar&gt;
            &lt;form id={{fields.formid}} is="ajax-form" action="{{fields.action}}" method="post" class="search-content" flex&gt;
  
            &lt;!-- div id="searchContent" class="search-content" flex --&gt;
  
            &lt;template repeat="{{field in fields.values}}"&gt;
              &lt;section horizontal?={{debug}} layout?={{debug}}&gt;
                &lt;template if={{debug}}&gt;
                &lt;span&gt;{{field.label}}:&lt;/span&gt;
                &lt;/template&gt;
                &lt;paper-input-decorator id="{{field.id}}" label="{{field.label}}" floatingLabel&gt;
                  &lt;input is="core-input" maxlength="{{field.length}}" id="{{field.id}}"
                    type="{{field.type}}" min="0" title="{{field.title}}" pattern="{{field.mask}}"/&gt;
                &lt;/paper-input-decorator&gt;
              &lt;/section&gt;
            &lt;/template&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
          &lt;content&gt;&lt;/content&gt;
        &lt;/template&gt;
  
        &lt;script&gt;
          PolymerExpressions.prototype.property = function (input, property, value) {
            return input.filter(function(item){
               return item[property] === value;
            });
          };
  
  
          Polymer('crud-form', {
            wide: true,
            debug: false,
            fields: null,
  
            invalid: function() {
              console.log('invalid form');
            },
            submitting: function(event) {
              console.log('submitting form');
            },
            submitted: function(event) {
              console.log('submitted form');
            },
            created: function() {
              console.log("created");
            },
            attached: function () {
              console.log("attached");
            },
            domReady: function() {
              console.log("domReady");
            },
            detached: function() {
              console.log("detached");
            },
            attributeChanged: function(attrName, oldVal, newVal) {
              //var newVal = this.getAttribute(attrName);
              console.log(attrName, 'old: ' + oldVal, 'new:', newVal);
            },
  
            ready: function() {
              console.log("ready");
              var form = this.shadowRoot.querySelector('form');
                      console.log(form);
              var events = [ 'invalid', 'submitting', 'submitted'];
              for (var event in events) {
                form.addEventListener(event, this[event]);
              }
              console.log(this.getAttribute('fields'));
              console.log(this.fields);
            }
          });
        &lt;/script&gt;
      &lt;/polymer-element&gt;
  
  
        &lt;polymer-element name="match-example" properties="debug"&gt;
          &lt;template&gt;
            &lt;core-media-query query="{{query}}" queryMatches="{{wide}}"&gt;&lt;/core-media-query&gt;
            &lt;core-ajax auto handleAs="json" url="demo.json" response="{{crud_form}}" progress="{{progress}}"
                loading="{{loading}}"
            &gt;&lt;/core-ajax&gt;
  
            &lt;template if="{{debug}}"&gt;
            &lt;div&gt;
              &lt;template if="{{loading}}"&gt;
                Loading...
              &lt;/template&gt;
              &lt;template if="{{!loading}}"&gt;
                Loaded!
              &lt;/template&gt;
            &lt;/div&gt;
            &lt;/template&gt;
  
        &lt;crud-form id="element" formid="crud_id" fields={{crud_form}} wide="{{wide}}" debug={{debug}}&gt;
          &lt;template if="{{debug}}"&gt;
          &lt;span&gt;And this is my client-provided content with {{wide}}&lt;/span&gt;
          &lt;/template&gt;
        &lt;/crud-form&gt;
  
          &lt;/template&gt;
          &lt;script&gt;
            Polymer('match-example', {
              query: 'min-width: 900px'
            });
          &lt;/script&gt;
        &lt;/polymer-element&gt;
  
        &lt;p&gt;An example of crud-form looks like this:&lt;/p&gt;
        &lt;match-example id="me" debug=false&gt;&lt;/match-example&gt;
  
      &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>