使用自定义元素

简介

网络严重缺乏表达。要了解我的意思，可以看一下 GMail 等“现代”Web 应用：

<div>汤品没有现代美食。不过，我们构建 Web 应用的方式也是这样。好难过。 我们不是应该对平台提出更多需求吗？

性感标记。让它成为现实

HTML 为我们提供了构建文档结构的良好工具，但其词汇仅限于 HTML 标准定义的元素。

如果 Gmail 的标记并不是恶劣的，该怎么办？如果它很美，该怎么办？

<hangout-module>
    <hangout-chat from="Paul, Addy">
    <hangout-discussion>
        <hangout-message from="Paul" profile="profile.png"
            profile="118075919496626375791" datetime="2013-07-17T12:02">
        <p>Feelin' this Web Components thing.
        <p>Heard of it?
        </hangout-message>
    </hangout-discussion>
    </hangout-chat>
    <hangout-chat>...</hangout-chat>
</hangout-module>

真新鲜！这款应用也非常合情合理。它有意义、易于理解，最重要的是，它可维护。以后，我/你只要检查一下声明式骨干系统，就能确切了解它的用途。

使用入门

自定义元素 可让 Web 开发者定义新型 HTML 元素。该规范是 Web 组件涵盖的若干新 API 原语之一，但很可能是最重要的。如果没有自定义元素解锁的功能，Web 组件就不会存在：

1. 定义新的 HTML/DOM 元素
2. 创建从其他元素扩展的元素
3. 将自定义功能逻辑捆绑到单个代码中
4. 扩展现有 DOM 元素的 API

注册新元素

您可以使用 document.registerElement() 创建自定义元素：

var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());

document.registerElement() 的第一个参数是元素的标记名称。名称必须包含短划线 (-)。例如，<x-tags>、<my-element> 和 <my-awesome-app> 均为有效名称，而 <tabs> 和 <foo_bar> 则无效。这一限制让解析器能够区分自定义元素与常规元素，还可确保将新标记添加到 HTML 时的向前兼容性。

第二个参数是一个（可选）对象，用于描述元素的 prototype。您可以在此处为元素添加自定义功能（例如公共属性和方法）。稍后会对此进行详细说明。

默认情况下，自定义元素继承自 HTMLElement。因此，上一个示例等同于：

var XFoo = document.registerElement('x-foo', {
    prototype: Object.create(HTMLElement.prototype)
});

调用 document.registerElement('x-foo') 会告知浏览器新元素，并返回可用于创建 <x-foo> 实例的构造函数。如果您不想使用构造函数，也可以使用其他元素实例化技术。

扩展元素

通过自定义元素，您可以扩展现有的（原生）HTML 元素以及其他自定义元素。如需扩展某个元素，您需要向 registerElement() 传递要继承的元素的名称和 prototype。

扩展原生元素

假如你对常规 Joe <button> 不满意，您希望通过增强其功能成为“超级按钮”。如需扩展 <button> 元素，请创建一个继承 HTMLButtonElement 的 prototype 并 extends 该元素名称的新元素。在本例中为“button”：

var MegaButton = document.registerElement('mega-button', {
    prototype: Object.create(HTMLButtonElement.prototype),
    extends: 'button'
});

从原生元素继承的自定义元素称为类型扩展自定义元素。它们继承自 HTMLElement 的专用版本，表示“元素 X 为 Y”。

例如：

<button is="mega-button">

扩展自定义元素

若要创建用于扩展 <x-foo> 自定义元素的 <x-foo-extended> 元素，只需继承其原型并说出您要继承的标记即可：

var XFooProto = Object.create(HTMLElement.prototype);
...

var XFooExtended = document.registerElement('x-foo-extended', {
    prototype: XFooProto,
    extends: 'x-foo'
});

如需详细了解如何创建元素原型，请参阅下文的添加 JS 属性和方法。

如何升级元素

您有没有想过为什么 HTML 解析器不能处理非标准标记？ 例如，如果我们在网页上声明 <randomtag>，就会非常满意。根据 HTML 规范：

抱歉，<randomtag>！您不是标准用户，沿用自“HTMLUnknownElement”。

自定义元素并非如此。具有有效自定义元素名称的元素继承自 HTMLElement。如需验证这一点，请启动控制台 Ctrl + Shift + J（在 Mac 上，则是 Cmd + Opt + J），然后粘贴以下代码行；它们会返回 true：

// "tabs" is not a valid custom element name
document.createElement('tabs').__proto__ === HTMLUnknownElement.prototype

// "x-tabs" is a valid custom element name
document.createElement('x-tabs').__proto__ == HTMLElement.prototype

无法解析的元素

由于自定义元素是通过脚本使用 document.registerElement() 注册的，因此可在浏览器注册定义之前进行声明或创建。例如，您可以在页面上声明 <x-tabs>，但在很久后才会调用 document.registerElement('x-tabs')。

在元素升级到其定义之前，它们称为“未解析元素”。这些是具有有效自定义元素名称但尚未注册的 HTML 元素。

下面的表格或许可帮助您理解问题：

名称	继承自	示例
无法解析的元素	HTMLElement	<x-tabs>、<my-element>
未知元素	HTMLUnknownElement	<tabs>、<foo_bar>

实例化元素

创建元素的常用技术仍然适用于自定义元素。与任何标准元素一样，它们可以在 HTML 中声明，也可以使用 JavaScript 在 DOM 中创建。

实例化自定义代码

声明它们：

<x-foo></x-foo>

在 JS 中创建 DOM：

var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
    alert('Thanks!');
});

使用 new 运算符：

var xFoo = new XFoo();
document.body.appendChild(xFoo);

实例化类型扩展元素

类型扩展程序样式的自定义元素的实例化与自定义标记极其接近。

声明它们：

<!-- <button> "is a" mega button -->
<button is="mega-button">

在 JS 中创建 DOM：

var megaButton = document.createElement('button', 'mega-button');
// megaButton instanceof MegaButton === true

如您所见，现在有一个 document.createElement() 的过载版本，它接受 is="" 属性作为其第二个参数。

使用 new 运算符：

var megaButton = new MegaButton();
document.body.appendChild(megaButton);

到目前为止，我们已学习了如何使用 document.registerElement() 告知浏览器有新标记...但作用不大。我们来添加属性和方法。

添加 JS 属性和方法

自定义元素的优势在于，您可以通过在元素定义中定义属性和方法，将量身定制的功能与该元素捆绑在一起。您可以将其视为为您的元素创建公共 API 的一种方式。

完整示例如下：

var XFooProto = Object.create(HTMLElement.prototype);

// 1. Give x-foo a foo() method.
XFooProto.foo = function() {
    alert('foo() called');
};

// 2. Define a property read-only "bar".
Object.defineProperty(XFooProto, "bar", {value: 5});

// 3. Register x-foo's definition.
var XFoo = document.registerElement('x-foo', {prototype: XFooProto});

// 4. Instantiate an x-foo.
var xfoo = document.createElement('x-foo');

// 5. Add it to the page.
document.body.appendChild(xfoo);

当然，构建 prototype 的方法有很多种。如果您不喜欢创建这样的原型，以下是同一内容的更精简版本：

var XFoo = document.registerElement('x-foo', {
  prototype: Object.create(HTMLElement.prototype, {
    bar: {
      get: function () {
        return 5;
      }
    },
    foo: {
      value: function () {
        alert('foo() called');
      }
    }
  })
});

第一种格式允许使用 ES5 Object.defineProperty。第二种方法是允许使用 get/set。

生命周期回调方法

元素可以定义一些特殊方法，以发掘其存在的有趣时期。我们将这些方法命名为生命周期回调。每种类型都有特定的名称和用途：

回调名称	调用时间
createdCallback	就创建了该元素的实例
attachedCallback	将实例插入到文档中
detachedCallback	从文档中移除了实例
attributeChangedCallback(attrName, oldVal, newVal)	添加、移除或更新属性

示例：在 <x-foo> 上定义 createdCallback() 和 attachedCallback()：

var proto = Object.create(HTMLElement.prototype);

proto.createdCallback = function() {...};
proto.attachedCallback = function() {...};

var XFoo = document.registerElement('x-foo', {prototype: proto});

所有生命周期回调都是可选的，但在合理时可以定义它们。例如，假设您的元素足够复杂，并在 createdCallback() 中打开了与 IndexedDB 的连接。在将其从 DOM 中移除之前，请在 detachedCallback() 中执行必要的清理工作。注意：例如，如果用户关闭标签页，您不应依赖这一点，而应将其视为可能的优化钩子。

另一个用例生命周期回调用于在元素上设置默认事件监听器：

proto.createdCallback = function() {
  this.addEventListener('click', function(e) {
    alert('Thanks!');
  });
};

添加标记

我们创建了 <x-foo>，向其提供 JavaScript API，但它为空！我们要为它提供一些 HTML 进行呈现吗？

生命周期回调在这里可以派上用场。具体而言，我们可以使用 createdCallback() 为元素授予一些默认的 HTML：

var XFooProto = Object.create(HTMLElement.prototype);

XFooProto.createdCallback = function() {
    this.innerHTML = "**I'm an x-foo-with-markup!**";
};

var XFoo = document.registerElement('x-foo-with-markup', {prototype: XFooProto});

实例化此标记并在开发者工具中进行检查（右键点击，选择“Inspect Element”）应会显示：

▾<x-foo-with-markup>
  **I'm an x-foo-with-markup!**
</x-foo-with-markup>

将内部构件封装在 Shadow DOM 中

Shadow DOM 本身就是一种用于封装内容的强大工具。将自定义元素与自定义元素结合使用，效果更佳！

Shadow DOM 会提供以下自定义元素：

1. 一种可以隐藏真实内容的方法，使用户远离血腥的实现细节。
2. 样式封装...自由。

从 Shadow DOM 创建元素与创建呈现基本标记的元素类似。不同之处在于 createdCallback()：

var XFooProto = Object.create(HTMLElement.prototype);

XFooProto.createdCallback = function() {
    // 1. Attach a shadow root on the element.
    var shadow = this.createShadowRoot();

    // 2. Fill it with markup goodness.
    shadow.innerHTML = "**I'm in the element's Shadow DOM!**";
};

var XFoo = document.registerElement('x-foo-shadowdom', {prototype: XFooProto});

我没有设置元素的 .innerHTML，而是为 <x-foo-shadowdom> 创建了阴影根，然后用标记填充它。在开发者工具中启用“Show Shadow DOM”设置后，您会看到一个可展开的 #shadow-root：

▾<x-foo-shadowdom>
  ▾#shadow-root
    **I'm in the element's Shadow DOM!**
</x-foo-shadowdom>

那就是影根！

使用模板创建元素

HTML 模板是另一种新的 API 基元，可以很好地适应自定义元素的各种应用。

示例：注册通过 <template> 和 Shadow DOM 创建的元素：

<template id="sdtemplate">
  <style>
    p { color: orange; }
  </style>
  <p>I'm in Shadow DOM. My markup was stamped from a <template&gt;.
</template>

<script>
  var proto = Object.create(HTMLElement.prototype, {
    createdCallback: {
      value: function() {
        var t = document.querySelector('#sdtemplate');
        var clone = document.importNode(t.content, true);
        this.createShadowRoot().appendChild(clone);
      }
    }
  });
  document.registerElement('x-foo-from-template', {prototype: proto});
</script>

<template id="sdtemplate">
  <style>:host p { color: orange; }</style>
  <p>I'm in Shadow DOM. My markup was stamped from a <template&gt;.
</template>

<div class="demoarea">
  <x-foo-from-template></x-foo-from-template>
</div>

这几行代码包含丰富的功能。我们来了解一下正在发生的所有情况：

1. 我们已在 HTML 中注册一个新元素：<x-foo-from-template>
2. 元素的 DOM 是从 <template> 创建的
3. 使用 Shadow DOM 可将元素的恐怖细节隐藏起来
4. Shadow DOM 会对元素样式进行封装（例如，p {color: orange;} 不会使整个页面变为橙色）

太好了！

设置自定义元素的样式

与任何 HTML 标记一样，自定义代码的用户可以使用选择器设置其样式：

<style>
  app-panel {
    display: flex;
  }
  [is="x-item"] {
    transition: opacity 400ms ease-in-out;
    opacity: 0.3;
    flex: 1;
    text-align: center;
    border-radius: 50%;
  }
  [is="x-item"]:hover {
    opacity: 1.0;
    background: rgb(255, 0, 255);
    color: white;
  }
  app-panel > [is="x-item"] {
    padding: 5px;
    list-style: none;
    margin: 0 7px;
  }
</style>

<app-panel>
    <li is="x-item">Do</li>
    <li is="x-item">Re</li>
    <li is="x-item">Mi</li>
</app-panel>

设置使用 Shadow DOM 的元素样式

当您结合使用 Shadow DOM 时，需要更深很多。 使用 Shadow DOM 的自定义元素可以继承其巨大优势。

Shadow DOM 会对元素注入样式封装。影子根中定义的样式不会从主机泄漏，也不会从页面渗入。对于自定义元素，元素本身就是宿主。样式封装的属性还允许自定义元素自行定义默认样式。

Shadow DOM 样式是一个庞大的话题！如果您想进一步了解详情，可以参考我的其他几篇文章：

• Polymer 文档中的“样式元素指南”。
• “Shadow DOM 201：CSS 和样式设置”。

使用 :unresolved 预防 FOUC

为了减少 FOUC，自定义元素指定一个新的 CSS 伪类 :unresolved。您可以用它来定位未解析的元素，直到浏览器调用 createdCallback()（请参阅生命周期方法）。一旦发生这种情况，相应元素就不再是未解析的元素。升级过程已完成，并且该元素已转换为其定义。

示例：在注册“x-foo”标记后淡入：

<style>
  x-foo {
    opacity: 1;
    transition: opacity 300ms;
  }
  x-foo:unresolved {
    opacity: 0;
  }
</style>

请注意，:unresolved 仅适用于未解析元素，不适用于从 HTMLUnknownElement 继承的元素（请参阅元素如何升级）。

<style>
  /* apply a dashed border to all unresolved elements */
  :unresolved {
    border: 1px dashed red;
    display: inline-block;
  }
  /* x-panel's that are unresolved are red */
  x-panel:unresolved {
    color: red;
  }
  /* once the definition of x-panel is registered, it becomes green */
  x-panel {
    color: green;
    display: block;
    padding: 5px;
    display: block;
  }
</style>

<panel>
    I'm black because :unresolved doesn't apply to "panel".
    It's not a valid custom element name.
</panel>

<x-panel>I'm red because I match x-panel:unresolved.</x-panel>

历史记录和浏览器支持

功能检测

特征检测就是检查是否存在 document.registerElement()：

function supportsCustomElements() {
    return 'registerElement' in document;
}

if (supportsCustomElements()) {
    // Good to go!
} else {
    // Use other libraries to create components.
}

浏览器支持

在 Chrome 27 和 Firefox ~23 中，document.registerElement() 最先开始采用标志。不过，从那以后，该规范有了很大改进。Chrome 31 是首个真正支持更新后的规范的一款。

在为浏览器提供卓越支持之前，Google 的 Polymer 和 Mozilla 的 X-Tag 均使用 polyfill。

HTMLElementElement 有什么变化？

对于遵循标准化工作的机制，您知道有一次 <element>。那就是蜜蜂膝盖。您可以使用它以声明方式注册新元素：

<element name="my-element">
    ...
</element>

遗憾的是，升级过程、极端情况和类似世界末日的场景存在太多的时间问题，无法完全解决。“<element>”必须搁置。2013 年 8 月，Dimitri Glazkov 曾在 public-adsenses 上发帖，宣布被移除（至少目前是这样）。

值得注意的是，Polymer 通过 <polymer-element> 实现了声明式的元素注册形式。如何估测？它使用了 document.registerElement('polymer-element') 以及我在从模板创建元素中所述的方法。

总结

自定义元素使我们能够使用该工具扩展 HTML 的词汇、向它传授新技巧以及在 Web 平台中遇到的漏洞。只要将它们与 Shadow DOM 和 <template> 等其他新平台基元结合使用，我们就会开始认识到 Web 组件的局面。标记再度魅力十足！

如果您有意开始使用网络组件，建议您查看 Polymer。它足以让您继续前进。