Web 组件获得跨浏览器的支持,社区正在突飞猛进地发展,并且有一个全新的 Web 组件目录可以准确地找到您需要的组件。
您曾经希望构建自己的独立 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 53 及 Chrome 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 规范非常强大 - 我们整理了一些教程,介绍如何使用 自定义元素 v1 和 Shadow DOM v1 您马上就可以开始使用了。
webcomponents.org
Web 组件社区也在突飞猛进地发展。我们很兴奋 即可看到 webcomponents.org 网站 - 网络组件社区,其中包括供开发者 共享各自的元素。
webcomponents.org 网站包含关于 Web 组件的信息 规范、更新和来自网络的内容 组件社区中 关于开源软件的文档 元素 和的集合 元素 由其他开发者构建的
你可以使用 Google 的 Polymer,或者只使用低级别 Web Component API 直接调用 API。然后发布您的 元素。
祝您在组件创建过程中一切顺利!