草案
本页尚未完工.
Web组件 由几个单独的技术组成。你可以将Web组件视为使用开放Web技术创建的可重用的用户界面小组件。它们是浏览器的一部分,因此它们不需要外部库,像 jQuery或Dojo。可以使用现有的Web组件而无需编写代码,只需向HTML页面添加import语句即可。Web组件使用新的或仍在开发的标准浏览器功能。
注意:这是一个试验性技术。使用它的浏览器必须支持Web组件。请参阅在Firefox中启用Web组件。
以上描述就现在而言没有任何问题,但是也遗漏了Web Components可以用来创建什么东西的问题。使用Web Components,可以比仅使用HTML, CSS和JavaScript做更多的事情,而且它们(Web Componnets)可以更简单的被重用。
"Web Components"并不是 Google Polymer 的另一个名称。Polymer是一个基于Web Components技术的框架。 你完全可以脱离Polymer创建和使用 Web Components。
目前,Web Components 并未被所有浏览器完整实现, 所以现在(2015年1月)在大部分浏览器中使用时,您会需要用polyfill来弥补。Google Polymer project 中可以找到polyfill。Web Components 在不同浏览器中的实现情况,参见 Are We Componentized Yet?
Web Components 由这四种技术组成 (尽管每种技术都可以独立使用):
Web Components标准定义了以下内容:
- 四种新的HTML元素:
<template>
,<content>
,<element>
, and<shadow>
- 与新元素相关的API接口:
HTMLTemplateElement
,HTMLContentElement
,HTMLElementElement
, andHTMLShadowElement
HTMLLinkElement
接口的拓展,以及<link>
元素- 一个注册新元素的接口:
Document.registerElement()
;以及对Document.createElement()
和Document.createElementNS()
的修改 - 自定义元素的原型(prototype)可以添加新的 『生命周期回调(lifecycle callbacks)』
- 元素的默认样式中添加新的CSS伪类(pseudo-classes) :
:unresolved
. - 影子DOM:
ShadowRoot
、Element.createShadowRoot()
、Element.getDestinationInsertionPoints()
和Element.shadowRoot
Event
接口的拓展:Event.path
Document
接口的拓展- Web Components 的样式:
- 新的伪类:
:host
、:host()
、:host-context()
- 新的伪元素:
::shadow
和::content
- 新的组合器(combinator):
/deep/
.
- 新的伪类:
在Firefox中启用Web Component
Firefox默认禁用Web Components。启用的步骤是,前往 about:config 页面
,注意取消出现的所有警告,搜索名为 dom.webcomponents.enabled 的配置,设置为 true。
标准
以下标准中定义了Web Components的接口:
规范 | 状态 | 评论 |
---|---|---|
Custom Elements | Working Draft | |
WHATWG HTML Living Standard template element |
Living Standard | No change |
HTML5 template element |
Recommendation | Initial definition |
Shadow DOM | Working Draft | |
HTML Imports | Working Draft | |
CSS Scoping Module Level 1 | Working Draft |