Web Components v1 - 新一代

Web 组件获得了跨浏览器支持,社区飞速发展,并且有一个全新的 Web 组件目录,可准确找到您所需的组件。

Taylor Savage
Taylor Savage

您是否曾经希望构建自己的独立 JavaScript 组件,以便轻松跨多个项目使用或与其他开发者共享(无论他们使用哪种 JavaScript 框架)?Web 组件可能适合您。

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

纸张进度元素的动画。

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

您之前可能听说过 Web 组件,Web 组件规范的早期版本 v0 就已在 Chrome 33 中推出

如今,得益于浏览器供应商之间的广泛合作,下一代 Web 组件规范 v1 获得了广泛的支持。从 Chrome 53Chrome 54 开始,Chrome 支持构成 Web 组件的两项主要规范:阴影 DOM自定义元素。 Safari 支持 Safari 10 中的 Shadow DOM v1,并实现了 WebKit 中的自定义元素 v1。Firefox 目前正在开发影子 DOM自定义元素 v1,而 Shadow DOM自定义元素也已列入 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 组件社区的有关 Web 组件规范、更新和内容的信息,并展示有关开源元素和由其他开发者构建的元素集合的文档。

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

祝您组件顺利完成!