十分钟带你入门 Web Components

组件封装，是我们前端一直在探讨的话题。但现在我们的组件库，更多的是基于某个框架去实现，比如 Vue 的 ElementUI，React 的 ANTD。这种组件的缺点就是对外部框架的依赖，你必须基于 Vue 或者 React 才能使用，假如某一天项目迁移又得重新书写一套。,那能不能基于原生的 HTML/CSS/JS 就能封装的组件规范呢？那就是 Web Components。,我认为组件就是内部抽象封装了一定的逻辑功能，并暴露相关接口给外部调用。,它能够完成以下的功能：,那 Web Components 怎么做到以上几点的呢？,主要有以下几点：,我们接下来通过封装一个 user-card Web Components 组件实战说明一下。本文 Demo 地址[1]。,我们先定义好它的 HTML 和 CSS。,这里留意几点：,使用 CustomElementRegistry.define() 方法注册您的新自定义元素 ，并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。,代码如下：,这里需要留意这个点：,定义好之后，我们就可以直接使用 user-card​ 这个自定义元素了，并且可以传递属性给组件，并且能够通过 slot​ 标签指定 name 属性，使用上面 HTML 模板中我们定义好的占位符。,最终的组件效果如下：,上面的 Demo 中其实已经使用了，我们可以在任意一个节点内部创建一个 Shadow DOM​，在获取元素实例后，调用 Element.attachShadow()​ 方法，就能将一个新的 shadow-root 附加到该元素上。,该方法接受一个对象，且只有一个 mode 属性，值为 open 或 closed，表示 Shadow DOM 内的节点是否能被外部获取。,上面我们设置为 closed。,假如改成 open，结果如下：,虽然 Web Components 提出来已经很久了，但是普及的程度远远没有 Vue、React 这些框架的组件库。其主要的问题是，Vue、React 这些框架帮助我们解决了一些视图渲染的逻辑，比如 React，使用 JSX 和 Css module，我们只需要关心数据状态，不需要像 Web Components 一样需要更多的关注 HTML 模板，也就带来了更多的灵活和便利。,精读《Web Components 的困境》[2]的总结中提到：,确实 React 和 Web Components 也是可以共存的，React 官方文档也提到：,至于应用层去基于 Web Components 去做更多的实现，我觉得这是一个很理想的状态，毕竟要 React、Vue 基于 Web Components 去封装它们的实现，那就需要 Web Components 做更多灵活的规范和标准，期待这一天的到来吧。,[1]Demo 地址: https://codepen.io/gpingfeng/pen/zYRMagp。,[2]精读《Web Components 的困境》: https://juejin.cn/post/6844903494885851149。,[3]精读《Web Components 的困境》: https://juejin.cn/post/6844903494885851149。,[4]Web Components MDN: https://developer.mozilla.org/zh-CN/docs/Web/Web_Components。,[5]Web Components 上手指南: https://segmentfault.com/a/1190000039269731。