Web Components v1 - 新一代

Web 组件获得跨浏览器的支持,社区正在突飞猛进地发展,并且有一个全新的 Web 组件目录可以准确地找到您需要的组件。

Taylor Savage
Taylor Savage

您曾经希望构建自己的独立 JavaScript 组件, 可轻松在多个项目中使用,也可以与其他开发者共享, 它们使用的是哪种 JavaScript 框架?Web Components 可能非常适合您。

Web 组件是一组新的网络平台功能, 自身的 HTML 元素。每个新的自定义元素可以有如下自定义标记: <my-button>,并且具备内置元素(自定义元素)的所有优势 可以具有属性和方法,触发和响应事件,甚至 封装样式和 DOM 树形成了各自的外观和风格。

纸张进度元素的动画。

通过提供基于平台的低级组件模型,Web Components 可让您 构建和分享可重复使用的元素,从专用按钮到 复杂视图(如日期选择器)。由于 Web 组件是使用 Platform 构建的, 内含强大的封装基元,您甚至可以使用 其他 JavaScript 库或框架中的组件 标准 DOM 元素。

您以前可能听说过 Web 组件,这是 Web 的早期版本。 组件规范 - v0 - 随 Chrome 一起提供 33

如今,由于浏览器供应商之间的广泛协作, 下一代网络组件规范 v1 获得广泛的支持。 Chrome 支持构成 Web 组件的两大规范:阴影 DOM自定义 Elements - 自 Chrome 53Chrome 54。 Safari 支持 Safari 中的 Shadow DOM v1 10,并已完成 自定义元素 v1 的实施中 WebKit。Firefox 是 目前正在开发跟岗学习 DOM自定义 Elements v1 及两者 阴影 DOM自定义 Elements 已列入 Edge 的路线图。

要使用 v1 实现定义新的自定义元素,您只需创建一个 一个新类,该类使用 ES6 语法扩展 HTMLElement,并使用 浏览器:

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

新的 v1 规范非常强大 - 我们整理了一些教程,介绍如何使用 自定义元素 v1Shadow DOM v1 您马上就可以开始使用了。

webcomponents.org

Web 组件社区也在突飞猛进地发展。我们很兴奋 即可看到 webcomponents.org 网站 - 网络组件社区,其中包括供开发者 共享各自的元素。

webcomponents.org

webcomponents.org 网站包含关于 Web 组件的信息 规范、更新和来自网络的内容 组件社区中 关于开源软件的文档 元素的集合 元素 由其他开发者构建的

你可以使用 Google 的 Polymer,或者只使用低级别 Web Component API 直接调用 API。然后发布您的 元素

祝您在组件创建过程中一切顺利!