Eric Bidelman
翻译： 米粽 (Leo Deng) 已发布: 八月 28th, 2013 已更新: 十二月 18th, 2013
This article discusses APIs that are not yet fully standardized and still in flux. Be cautious when using experimental APIs in your own projects.
引言
现在的 web 严重缺乏表达能力。你只要瞧一眼“现代”的 web 应用，比如 GMail，就会明白我的意思：
现代 web 应用：使用
堆砌
一点都不现代。然而可悲的是，这就是我们构建 web 应用的方式。在现有基础上我们不应该有更高的追求吗？
时髦的标记，行动起来！
HTML 为我们提供了一个完美的文档组织工具，然而 HTML 规范定义的元素却很有限。
假如 GMail 的标记不那么糟糕，而是像下面这样漂亮，那会怎样？
真是令人耳目一新！这个应用太合理了，既有意义，又容易理解。最妙的是，它是可维护的，只要查看声明结构就可以清楚地知道它的作用。
自定义元素，救救我们！就指望你了！
赶紧开始吧
自定义元素 允许开发者定义新的 HTML 元素类型。该规范只是 Web 组件模块提供的众多新 API 中的一个，但它也很可能是最重要的一个。没有自定义元素带来的以下特性，Web 组件都不会存在：
定义新的 HTML/DOM 元素
基于其他元素创建扩展元素
给一个标签绑定一组自定义功能
扩展已有 DOM 元素的 API
注册新元素
使用 document.registerElement() 可以创建一个自定义元素：
var XFoo = document.registerElement(‘x-foo’);
document.body.appendChild(new XFoo());
document.registerElement()
的第一个参数是元素的标签名。这个标签名必须包括一个连字符（-）。因此，诸如 、 和 都是合法的标签名，而 和 <foo_bar> 则不是。这个限定使解析器能很容易地区分自定义元素和 HTML 规范定义的元素，同时确保了 HTML 增加新标签时的向前兼容。
第二个参数是一个（可选的）对象，用于描述该元素的 prototype。在这里可以为元素添加自定义功能（例如：公开属性和方法）。稍后详述。
自定义元素默认继承自 HTMLElement，因此上一个示例等同于：
var XFoo = document.registerElement(‘x-foo’, {
prototype: Object.create(HTMLElement.prototype)
});
调用 document.registerElement(‘x-foo’) 向浏览器注册了这个新元素，并返回一个可以用来创建 元素实例的构造器。如果你不想使用构造器，也可以使用其他实例化元素的技术。
如果你不希望在 window 全局对象中创建元素构造器，还可以把它放进命名空间（var myapp = {}; myapp.XFoo = document.registerElement(‘x-foo’);）。
然后直接上代码了~~
<!DOCTYPE html>
<!–
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
–>
<html>
<head>
<title></title>
<meta charset=”UTF-8″>
<link rel=”import” href=”test-component.html”>
</head>
<body>
<x-foo-shadowdom></x-foo-shadowdom>
<script>
var XFooProto = Object.create(HTMLElement.prototype);
XFooProto.createdCallback = function() {
// 1. 为元素附加一个 shadow root。
var shadow = this.createShadowRoot();
// 2. 填入标记。
shadow.innerHTML = “<b>I’m in the element’s Shadow DOM!</b>”;
};
var XFoo = document.registerElement(‘x-foo-shadowdom’, {prototype: XFooProto});
</script>
</body>
</html>
http://www.html5rocks.com/zh/tutorials/webcomponents/customelements/#intro
