Web 组件获得了跨浏览器支持,社区飞速发展,并且有一个全新的 Web 组件目录,可准确找到您所需的组件。
您是否曾经希望构建自己的独立 JavaScript 组件,以便轻松跨多个项目使用或与其他开发者共享(无论他们使用哪种 JavaScript 框架)?Web 组件可能适合您。
Web 组件是一组新的 Web 平台功能,可让您创建自己的 HTML 元素。每个新的自定义元素都可以具有像 <my-button>
这样的自定义标记,并具有内置元素的所有优势 - 自定义元素可以具有属性和方法、触发和响应事件,甚至具有封装的样式和 DOM 树,可呈现其自己的外观和风格。
通过提供基于平台的低级别组件模型,Web 组件可让您为各种用途构建和共享可重复使用的元素,从专用按钮到复杂视图(如日期选择器)。由于 Web 组件是使用包含强大封装基元的平台 API 构建的,因此您甚至可以在其他 JavaScript 库或框架中使用这些组件,就像它们是标准 DOM 元素一样。
您之前可能听说过 Web 组件,Web 组件规范的早期版本 v0 就已在 Chrome 33 中推出。
如今,得益于浏览器供应商之间的广泛合作,下一代 Web 组件规范 v1 获得了广泛的支持。从 Chrome 53 和 Chrome 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 规范功能非常强大,我们整理了有关如何使用自定义元素 v1 和 Shadow DOM v1 的教程来帮助您入门。
webcomponents.org
Web 组件社区也在飞速发展。我们很高兴看到更新后的 webcomponents.org 网站发布,该网站是 Web 组件社区的中心,其中包括一个供开发者分享元素的集成目录。
webcomponents.org 网站包含来自 Web 组件社区的有关 Web 组件规范、更新和内容的信息,并展示有关开源元素和由其他开发者构建的元素集合的文档。
您可以使用 Google 的 Polymer 等库开始构建您的第一个元素,也可以直接使用低层级 Web Component API 的组件。然后,在 webcomponents.org 上发布您的元素。
祝您组件顺利完成!