开坑，写点Polymer 1.0 教程第3篇——组件注册与创建

之前一篇算是带大家大致领略了一下Polymer的风采。这篇我们稍微深入一丢丢，讲下组件的注册和创建。

创建自定义组件的几种方式

这里我们使用Polymer函数注册了一个自定义组件"my-element"

// register an element
Polymer({
  is: 'my-element',
  created: function() {
    this.textContent = 'My element!';
  }
});

在hello world篇中我们使用的是直接在html页面里写标签的方式来创建这个自定义组件

但是如果my-element需要被动态创建，使用上面的方式显然就满足不了要求。所以Polymer提供了另外2种创建方式
第一种

var element = document.createElement('my-element');

啊，我们可以调用原生dom api一样来创建自定义组件了，这是一件多么让人愉悦的事情。
我们来测试一下

第二种
这种方式需要我们在注册自定义组件的时候进行一点小的改动，调用Polymer函数定义的时候把返回值赋个一个全局变量MyElement

// register an element
MyElement = Polymer({
  is: 'my-element',
  created: function() {
    this.textContent = 'My element!';
  }
});

var el2 = new MyElement();

从这里可以得知Polymer函数会返回一个自定义组件的构造函数，使用new就可以创建它了。
我们来测试一下

对于这种方法，Polymer还提供了一个接口factoryImpl可以让我们在创建自定义组件的时候传入运行时的构造参数，而不是只能死死地使用注册组件时候定义的内容。
我们修改下例子

测试一下

这种构造函数传参的方式只适用于，new CustomElement的创建方式，而且它2种方式不支持，原因你自己拍脑袋想想就懂了。

factoryImpl 被调用的时机是在dom被创建，默认值被设置了以后，具体的我们会在生命周期篇里谈。

扩展原生的html标签

首先告诉大家一个非常遗憾的消息，Polymer当前版本暂不支持扩展自己定义组件（既自己不能扩展自己，但是会在以后版本中支持大家请擦干净鼻涕静静等待），目前只能扩展原生的html标签如input， button等。Polymer提供了一个extends接口来实现扩展

my-input.html

如果使用的是dom api我们需要这样来创建

var el1 = document.createElement('input', 'my-input')

如果使用html标签的方式，我们要这样写

窃以为，后面2种方式来创建一个组件是非常非常扯蛋的一件事情，使用者必须非常清楚组件的继承关系，你说这还不扯蛋么？期望Polymer在后续版本的api中对于组件扩展这一块内容，消灭以上两种不靠谱的创建方式。

在html主文件里定义“自定义组件

首先说下，只有在写demo的时候，才会用到这种写法。生产环境中，都是需要把组件写在各自独立的文件中。

HTMLImports.whenReady()这个方法你可以把它理解成JQ里的document.ready()或者AMD里的domReady(),可以确保引用的组件dom都被加载完了再进行下一步的调用，一般都是用在index.html也就是程序的入口处。