CODEWITHSUNDEEP
javascriptpolymer
a1626
a1626

Reputation: 2964

polymer elements registration and lifecycle (created and ready called twice)

Polymer documentation states that elements initialization order is

But here is what i got run

<html>
<head>
    <!-- <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> -->
    <link rel="import" href="bower_components/polymer/polymer.html"/>
    <script>
        jsElement=Polymer({
            is:"js-element",

            extends:'input',

            hostAttributes: {
              'string-attribute': 'Value',
              'boolean-attribute': true,
              tabindex: 0
            },//this results in <js-element string-attribute="Value" boolean-attribute tabindex="0"></js-element> refer https://www.polymer-project.org/1.0/docs/devguide/properties.html#attribute-serialization

            //callback
            created:function(){
                this.textContent="Helloooo..."+this.b;//this.b y undefined
                this.style.border = '1px solid red';
                console.log(this.localName + '#' + this.id + ' was created');
            },

            ready: function() {
                console.log(this.localName + '#' + this.id + ' has local DOM initialized');
            },

            attached: function() {
                console.log(this.localName + '#' + this.id + ' was attached');
            },

            detached: function() {
                console.log(this.localName + '#' + this.id + ' was detached');
            },

            attributeChanged: function(name, type) {
                console.log(this.localName + '#' + this.id + ' attribute ' + name +
                  ' was changed to ' + this.getAttribute(name));
            },

            //provide add variable property to constructor
            factoryImpl:function(a,b){
                this.b=b;
                console.log(this.b);
            }
        });

        //working without both if no variable required
        var element=new jsElement(2,"aaaa");
        //or
        //var element=document.createElement('js-element');
    </script>
    <link rel="import" href="bower_components/iron-icon/iron-icon.html"/>
</head>
<body>
    <!--To run js-element tag comment extends input -->
    <!-- <js-element>yo</js-element> -->
    <input is="js-element"></input>
    <iron-icon src="2.jpg"></iron-icon>
</body>
</html>

i get output as

input# was created
input# has local DOM initialized
input# attribute string-attribute was changed to Value
input# attribute boolean-attribute was changed to 
input# attribute tabindex was changed to 0
aaaa
input# was created
input# has local DOM initialized
input# attribute string-attribute was changed to Value
input# attribute boolean-attribute was changed to 
input# attribute tabindex was changed to 0
input# was attached

Can someone please help me understand why create and ready are being called twice? Also why is the value of this.b undefined in created function even second time around?

Upvotes: 1

Views: 2716

Answers (1)

sfeast
sfeast

Reputation: 956

why create and ready are being called twice?

create & ready are initialization callbacks called for every instance of an element created. You've created 2 elements here so they're called once for each element.

why is the value of this.b undefined in created function

The factoryImpl method is called after the element is initialized (i.e. after create & ready are called), so this.b doesn't yet have a value when create is called.

Upvotes: 1

Related Questions