Web Components v1 - 新一代

Web 组件获得了跨浏览器支持,社区正在蓬勃发展,我们还推出了全新的 Web 组件目录,可让您准确找到所需的组件。

Taylor Savage
Taylor Savage

您是否曾想过构建自己的自包含 JavaScript 组件,以便在多个项目中轻松使用,或者与其他开发者共享(无论他们使用哪种 JavaScript 框架)?您可能需要使用 Web 组件。

Web Components 是一组新的 Web 平台功能,可让您创建自己的 HTML 元素。每个新的自定义元素都可以具有 <my-button> 等自定义标记,并具有内置元素的所有优点:自定义元素可以具有属性和方法、触发事件并响应事件,甚至可以具有封装的样式和 DOM 树,以便带来自己的外观和风格。

paper-progress 元素的动画。

通过提供基于平台的低级组件模型,Web 组件可让您构建和共享可重复使用的元素,从专用按钮到日期选择器等复杂视图,应有尽有。由于 Web 组件是使用包含强大封装基元(primitive)的平台 API 构建的,因此您甚至可以在其他 JavaScript 库或框架中使用这些组件,就像它们是标准 DOM 元素一样。

您可能听说过 Web Components,Web Components 规范的早期版本 v0 已在 Chrome 33 中发布

如今,得益于浏览器供应商之间的广泛协作,新一代 Web Components 规范 - v1 - 获得了广泛支持。从 Chrome 53Chrome 54 开始,Chrome 支持构成 Web 组件的两个主要规范:Shadow DOM自定义元素。Safari 已支持 Safari 10 中的 Shadow DOM v1,并已完成 WebKit 中的自定义元素 v1 的实现。Firefox 目前正在开发 Shadow DOMCustom Elements v1,并且 Shadow DOMCustom Elements 都已列入 Edge 的路线图。

如需使用 v1 实现定义新的自定义元素,只需创建一个使用 ES6 语法扩展 HTMLElement 的新类,并将其注册到浏览器即可:

class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);

新的 v1 规范非常强大 - 我们整理了有关使用自定义元素 v1Shadow DOM v1 的教程,以帮助您上手使用。

webcomponents.org

Web 组件社区也在飞速发展。我们很高兴地宣布,更新后的 webcomponents.org 网站(Web 组件社区的焦点)已发布,其中包含一个集成的目录,供开发者分享其元素。

webcomponents.org

webcomponents.org 网站包含有关 Web 组件specsWeb 组件社区的更新和内容,并显示其他开发者构建的开源元素元素集合的文档。

您可以开始使用 Google 的 Polymer 等库构建第一个元素,也可以直接使用低级 Web 组件 API。然后,在 webcomponents.org 上发布您的元素

祝您构建组件顺利!