在过去的几年里，我们见证了“应用”对于开发者和用户来说的含义发生了变化。这个词唤起了丰富的、面向任务的用户体验的概念，它拥有高度优化的用户界面，可以响应其环境，并且可以在一系列常用的设备上使用。为了使开发丰富的应用体验更容易，原生平台已经创建了许多自己“即用型”的控件和组件。

对于其他原生技术栈来说，可扩展组件几乎是理所当然的——但对于 Web 来说并非如此。很快，这一切都会改变。我们正处于一场声明式复兴的边缘，这将极大地推进 Web 平台的应用开发，而 Web Components 将推动这一进程。

X-Tag 和 Web Components 提供了彻底改变布局、UI 和部件开发现状的功能——以下是一些值得注意的 Web Components 功能

• 创建浏览器能够理解的真正的自定义元素
• 停止疯狂的实例化$$(‘button.super’).initSuperButton()
• 从应用的视图文件中移除难以管理的 HTML 部件内容
• 使用基于标准技术的可共享组件

认识 Web Components 家族

Web Components 是一组 W3C 规范，正在迅速走向标准化，它提供了一个强大的 HTML 组件模型。你不应该假设你选择的浏览器实现了以下规范。虽然这些规范在不同浏览器中的实现阶段各不相同，但你可以使用 X-Tag（结合 Mozilla 或 Google 的 polyfill）来创建自定义元素，这些元素可以在最近版本的 Firefox、Chrome、Safari 和原生移动浏览器中良好运行。X-Tag 是一个功能强大的语法糖库，主要专注于包装和增强 Web Components 规范草案之一：自定义元素（document.register）。我们很快就会讲到 X-Tag——但现在，让我们快速回顾一下每个规范的关键特性

自定义元素

自定义元素 为你提供了一种在你的环境中创建新元素的方法。有两种方法可以声明一个新的自定义元素，即命令式 DOM API——document.register()，以及声明式 HTML 标签——（其 DOM 构造函数是 HTMLElementElement）。声明之后，新的自定义元素可以通过与原生元素相同的方式创建，例如 document.createElement、原始源代码中的存在（页面的标记）以及 innerHTML 等。

以下是一个自定义元素注册在声明式和命令式样式中看起来的样子示例

document.register('x-foo', {
  prototype: Object.create(HTMLElement.prototype, {
    readyCallback: {
      value: function(){
        // do stuff here when your element is created
        this.innerHTML = '
Barrrr me matey!
';
      }
    },
    bar: {
      get: function() { return 'bar'; },
    },
    // add more properties to your custom prototype
    // ...
  })
});

Shadow DOM

Shadow DOM 允许你在组件内封装结构和支持元素。中的节点对于显示 UI 仍然可见（取决于元素类型和你的样式），但对你的应用代码的其他部分隐藏，除非你显式地跨越 Shadow 边界。

HTML 模板

HTML 模板 为 Web 平台带来了简单的 DOM 模板和标记重用——这些通常使用 HTMLScriptElement + DocumentFragment 技巧模式 进行模拟。

HTML 导入

HTML 导入 是包含声明式组件定义的外部 HTML 文档。HTML 组件文档可以使用 link 元素以及 rel 属性值 import 进行导入。导入的资源本身可能包含其他子导入，浏览器随后会检索这些子导入，并在导入时执行自动依赖关系解析。

Web Components + X-Tag = 胜利

Mozilla 的 X-Tag 库 增强了创建自定义元素的命令式（JavaScript）途径。X-Tag 的主要接口是 xtag.register() 方法——它使用即将成为标准的 document.register() DOM API，并结合了使开发令人惊叹的自定义元素变得轻松的功能和特性。

创建自定义元素

以下是一个使用 X-Tag 注册自定义元素的快速示例

xtag.register('x-pirate', {
  lifecycle: {
    ready: function(){
      this.innerHTML = '
' +
                         'Barrr me matey!' +
                       '
';
    }
  },
  accessors: {
    src: {
      // X-Tag's attribute sugar relays any value passed to the src
      // setter on to the src attribute of our  and its
      //  element (specified by CSS selector), and vice versa.
      attribute: { selector: 'img' },
      set: function(){
        // When a 's src attribute/setter is changed, we
        // stop everything to announce the arrival of a new pirate.
        // Ex: doc.querySelector('x-pirate').src = 'pirate-2.png';
        alert("There's a new captain on deck ye scurvy dogs!");
      }
    }
  },
  events: {
    // This is an example of X-Tag's event and pseudo systems. The
    // "tap" custom event handles the dance between click and touch,
    // the ":delegate(img)" pseudo ensures our function is only
    // called when tapping the  inside our .
    'tap:delegate(blockquote > img)': function(){
      alert("A pirate's life for me!");
    }
  }
});

前往演示洞穴，蝙蝠侠！

我们正在积极开发一个自定义元素 UI 工具包和样式包，这将使应用界面的开发变得轻而易举。它仍处于非常早期的阶段，但我们有 一些演示供你参考。

获取代码

前往 X-Tags.org 并获取代码来开发你自己的自定义元素。掌握了窍门之后，开始为我们的 开源项目 做贡献！