简介
网络严重缺乏表达。要了解我的意思,可以看一下 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 组件就不会存在:
- 定义新的 HTML/DOM 元素
- 创建从其他元素扩展的元素
- 将自定义功能逻辑捆绑到单个代码中
- 扩展现有 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 会提供以下自定义元素:
- 一种可以隐藏真实内容的方法,使用户远离血腥的实现细节。
- 样式封装...自由。
从 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>.
</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>.
</template>
<div class="demoarea">
<x-foo-from-template></x-foo-from-template>
</div>
这几行代码包含丰富的功能。我们来了解一下正在发生的所有情况:
- 我们已在 HTML 中注册一个新元素:
<x-foo-from-template>
- 元素的 DOM 是从
<template>
创建的 - 使用 Shadow DOM 可将元素的恐怖细节隐藏起来
- 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。它足以让您继续前进。