Registration and Declaration cycle
my = Polymer ({ is: "Proto-element", created:function () { this.innerhtml = ' created '; } }); /Registration Returns a constructor, two ways to create an instance var el1 = document.createelement (' proto-element '); var el2 = new My ();
Use polymer to register custom elements, created this.innerhtml= ' SFP ' in function, will not be executed
Passing parameters requires the use of Factoryimpl, so that the instance can be created only through constructors
Called Factoryimpl after element initialization (local DOM establishment, default setting)
Extending the local element (to input and other styles) is now supported, and does not support extending the custom element. Extending an instance
Myinput = Polymer ({ is: ' My-input ', extends: ' Input ', created:function () { This.style.border = ' 1px Solid red '; }}); var el1 = new Myinput (); Console.log (El1 instanceof htmlinputelement); Truevar El2 = document.createelement (' input ', ' my-input '); Console.log (El2 instanceof htmlinputelement); true//using <input is= "My-input" >
callback function within the declaration period: Created,attached,detached,attributechanged,ready
Ready:function () { <!--access a local DOM element by ID using this.$-- //Autodiscover node This.$.header.textco ntent = ' hello! ';}
Polymer () can add more than 5 functions, or Createdcallback, Attachedcallback, Detachedcallback, Attributechangedcallback.
Order of Element initialization:
Created callbacklocal DOM constructeddefault values Setready Callbackfactoryimpl callbackattached callback
The registration of the callback function? I can't read it.
Setting properties
Polymer ({ is: ' X-custom ', hostattributes: { role: ' button ', ' aria-disabled ': true, tabindex:0 } });
Effect: <x-custom role= "button" aria-disabled tabindex= "0" ></x-custom>
Just set the prototype of the element without registering it immediately
var myelement = Polymer.class ({ is: ' my-element ', //See below for lifecycle Callbacks Created:function () { c3/>this.innerhtml = ' My element! '; }});
Register Now
Document.registerelement (' my-element ', myelement);
var el = new MyElement ();
Polymer-developer Guide-registration and lifecycle