CODEWITHSUNDEEP
polymer
michel46
michel46

Reputation: 13

Polymer 2.0: how to access a composant by its id?

I've transformed my code from Polymer 1.0 (works in 1.0).

Now, console reports only null or error during access to iron-element by its id. I don't understand why. Can you help me?

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">

<dom-module id="my-ajax">
  <template>
    <iron-ajax
            id="req"
            method="{{method}}"
            url="{{url}}"
            handle-as="{{returnType}}"
            content-type="{{contentType}}"
            params="{{queryString}}"
            on-response="_handleResponse"
            on-error="_handleError">
    </iron-ajax>
  </template>
  <script>
    class MyAjax extends Polymer.Element {
        static get is() {
            return 'my-ajax'
        }
        static get properties() {
            return {
                method: {
                    type: String,
                    value: "GET",
                    notify: true
                },
                ...
               datas: {
                    type: Object,
                    notify: true
                }
            }
        }
        constructor() {
            super();
        }
        ready() {
            console.log(document.querySelector('#req'))
            console.log(document.querySelector('req'))
            console.log(this.$.req)
        }
        ...

    }
    customElements.define(MyAjax.is, MyAjax)
 </script>
</dom-module>

In 1.0 I intensively use this.$.xxx to access element without problems.

Upvotes: 0

Views: 68

Answers (1)

tony19
tony19

Reputation: 138226

When overriding any of the lifecycle callbacks (including ready()), be sure to call the super equivalent. In this case, you need to call super.ready() to properly setup automatic node binding.

ready() {
  super.ready();  // <-- required
  console.log(this.$.req);
}

Upvotes: 1

Related Questions