原生javascript组件开发之Web Component实战

前言

作为一名前端工程师，我们每天都在和组件打交道，我们也许基于react/vue使用过很多第三方组件库，比如ant design，elementUI，iView等，或者基于它们进行过组件的二次开发，比如业务组件，UI组件等，亦或者觉得团队能力很强，可以不依赖第三方而独立开发属于自己的组件库。无论何种形式，组件开发已然成为我们工作中的必备技能，为了更好的复用性和可维护性，组件化开发是必然选择，也正是因为组件化开发越来越重要，几年前web标准推出了Web Component这一概念，意在解决html原生标记语言复用性的问题。

目前vue或者react框架中也支持使用Web Component，而且在Web Component中也可以动态的调用react或者vue的api来实现组件或页面的渲染，这给我们开发者提供了更大的自由度，从而在日益复杂的项目中能使用更加灵活且优雅的方式来进行组件化开发。

我们使用Web Component可以通过原生的方式来实现组件化而不依赖与vue或者react这些第三方框架，并且现代浏览器对其支持还算不错，相信未来Web Component将会成为组件开发的趋势。所以接下来笔者将会带大家一步步来学习Web Component，并且使用Web Component实现两个常用组件：

• Button

• Modal

大家在掌握了Web Component之后可以开发更多自定义组件，那么写下来就来学习一下吧。

正文

在开始正文之前笔者还想多啰嗦一下，也是之前有很多朋友问我的问题：如何在公司平衡好工作和成长？

其实笔者也经历过这种迷茫期，之前因为公司业务繁忙而不得不忙于编写业务代码，几乎没有时间去学习和成长。有些时候项目做完之后又有新的需求要处理，感觉瞬间被掏空。（B端产品为了满足客户需求往往在产品把控上很难做取舍，因为客户就是上帝， 所以工程师和产品的关系很微妙～）

一般情况下遇到以上的情景，作为一个合格的企业员工的，当然是业务和任务优先，在完成工作之后再去考虑成长和学习。当然公司也不会一直这么忙，所以当空闲的时候，我们可以好好利用（当然偶尔刷刷手机也是允许的，取决于个人）。

另一方面，我们可以通过提高工作效率来压缩工作时间，因为业务代码做多了总会有点规律和总结，如果整体架构设计的好，一般第一次做过了，第二次再遇到类似的业务几乎“秒关”，这一块对于前端来说，组件系统和模块化尤其重要；对于后端来说，微服务是很好的例子。

所以说如何学习和成长，以上两点是笔者3年工作的总结，希望能给大家以启发。

另一个问题就是如何快速掌握新技术？这个答案在这篇文章结束后，大家也许会明白些许。

好了，废话到此为止，接下来进入我们的Web Component实战。笔者对其知识点梳理成如下的思维导图：

1. Web Component基础知识

Web Components主要由三项技术组成，分别为

• Custom elements（自定义元素）

• Shadow DOM（影子DOM）

• HTML templates（HTML模板）

它们可以一起使用来创建功能强大的定制元素，并且可以在我们喜欢的任何地方重用，不必担心代码冲突。接下来笔者就分别介绍这三项技术。

1.1 Custom elements（自定义元素）

custom elements也就是我们常说的自定义标签，它主要通过CustomElementRegistry接口来定义，CustomElementRegistry.define(name, class, extends) 方法用来注册一个custom element，该方法接受以下参数：

• name 所创建的元素名称，且需符合 DOMString 标准的字符串。注意，custom element 的名称不能是单个单词，且其中必须要有短横线

• class 用于定义元素行为的类

• extends 可选参数，一个包含 extends 属性的配置对象，指定了所创建的元素继承自哪个内置元素，可以继承任何内置元素。

具体案例如下：

customElements.define(
'word-count&#