如何创建普通的HTML元素

本文主要介绍如何创建一个自定义的HTML元素以及定义它们的API

document.registerElement

通过document.registerElement可以在浏览器中注册一个自定义元素：
<pre>var constructor = document.registerElement(tag-name, options);</pre>

1. constructor：返回值，构造函数原型</li>
2. tag-name：自定义标签名，必须有一个连字符（-），例如my-tag，用于区分自定义HTML元素与标准HTML元素
3. options：可选，constructor的原型对象

自定义元素

<pre>var Mytag = document.registerElement('my-tag'); document.body.appendChild(new Mytag());</pre>

上面代码创建了一个自定义标签<mg-tag>，然后<mg-tag></mg-tag>就会添加到body末尾

为自定义元素添加API

通过var MytagProto = Object.create(HTMLElement.prototype);创建一个新的对象，这个对象就会继承标准HTML元素的方法和属性

可以自定义方法和属性，如

<pre>`
MytagProto.hello = function(val) {
alert(val);
}

Object.defineProperty(MytagProto, 'title', {
value: 'mg tag',
writable : true
});
`</pre>

调用document.registerElement设置属性
<pre>var Mytag = document.registerElement('my-tag', { prototype: MytagProto }); var mytagEle = new Mytag(); document.body.appendChild(mytagEle); var title = mytagEle.title; mytagEle.hello(title);</pre>

参考链接：http://blog.teamtreehouse.com/create-custom-html-elements-2