polymer-developer guide-registration and lifecycle

注册和声明周期

my = Polymer({
     is: "proto-element",
     created: function() {
      this.innerHTML = 'created';
     }     
   });
//注册之后会返回构造函数，创建实例的两种方法
var el1 = document.createElement('proto-element');
var el2 = new my();

使用polymer注册自定义元素，created function 中的this.innerHTML='sfp',不会被执行

传递参数需要使用factoryImpl，这样的话，只能通过构造函数来创建实例

在元素初始化（本地dom建立，默认值设定）之后，才调用factoryImpl

现在只支持扩展本地元素(给input加其他的样式)，而不支持扩展自定义元素。扩展实例

MyInput = Polymer({
  is: 'my-input',
  extends: 'input',
  created: function() {
    this.style.border = '1px solid red';
  }
});

var el1 = new MyInput();
console.log(el1 instanceof HTMLInputElement); // true

var el2 = document.createElement('input', 'my-input');
console.log(el2 instanceof HTMLInputElement); // true

//使用
<input is="my-input">

声明周期内的回调函数：created，attached，detached，attributeChanged，ready

ready: function() {
  <!-- access a local DOM element by ID using this.$ -->
  //自动发现节点
  this.$.header.textContent = 'Hello!';
}

polymer()中可以加的函数有以上5个，或者createdCallback, attachedCallback, detachedCallback, attributeChangedCallback。

元素初始化的顺序：

created callback
local DOM constructed
default values set
ready callback
factoryImpl callback
attached callback

回调函数的注册？看不懂

设定属性

Polymer({
    is: 'x-custom',
    hostAttributes: {
      role: 'button',
      'aria-disabled': true,
      tabindex: 0
    }
  });
//效果：<x-custom role="button" aria-disabled tabindex="0"></x-custom>

只设定元素的原型，而不立即注册它

var MyElement = Polymer.Class({
  is: 'my-element',
  // See below for lifecycle callbacks
  created: function() {
    this.innerHTML = 'My element!';
  }
});
//现在注册
document.registerElement('my-element', MyElement);
var el = new MyElement();