我正在参加「掘金·启航计划」。
今天聊一个工作中遇到的问题，其实也是很简单的一个问题。
就是领导要求我们实现一个在vue2和vue3两种语言下都能支持的组件，并且在vue2项目和vue3项目中引入这个组件，比较快捷方便。
后面做了一下调研，决定使用webComponent的方式封装这个组件。
从调研的结果来看，webComponet存在浏览器兼容性的问题，这个属性的浏览器兼容性情况如下：
但是好在我们公司基于谷歌浏览器专门进行了一层封装，所以我们在使用的时候，不需要考虑浏览器的兼容性问题，封装浏览器已经帮我们处理了。
所以最后就选用了webComponent这个方案实现。
下面我举一个简单的例子，说一下他的实现方式吧。
举一个简单例子
前置知识点
这里我以封装一个Button按钮组件为例，来向大家演示这个问题。我这里通过Shadow DOM的方式创建shaDom。
在创建好了之后需要穿管模板，模板中的html和css要保持分离的状态。
最后，将这个创建好的模板插入到shaDom中。
另外，在创建整个shaDom之后，整个过程会有4个生命周期函数，这4个生命周期函数如下。
1、connectedCallback：当自定义元素第一次被连接到文档 DOM 时被调用。
2、disconnectedCallback：当自定义元素与文档 DOM 断开连接时被调用。
3、adoptedCallback：当自定义元素被移动到新文档时被调用。
4、attributeChangedCallback：当自定义元素的一个属性被增加、移除或更改时被调用。
例子的代码
结合上面的知识，我把封装的代码例子贴出来。
- index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<lz-btn></lz-btn>
<!-- 1. 使用自定义组件的方式引入 -->
<!-- <script src="./btn.js"></script> -->
<!-- 1. 使用template模板的方式引入 -->
<script src="./template.js"></script>
<script>
</script>
</body>
</html>
- template.js
class Btn extends HTMLElement {
constructor() {
super();
// 2. 设置shadow将html和css进行隔离
const shaDom = this.attachShadow({ mode: 'open' })
this.template = this.h('template');
this.template.innerHTML = `
<style>
.btn{
width: 200px;
height: 200px;
border: 1px solid green;
}
</style>
<div class="btn">我叫小明</div>
`;
shaDom.appendChild(this.template.content.cloneNode(true));
}
h(el) {
return document.createElement(el);
}
//四个生命周期函数 => 当自定义元素第一次被连接到文档 DOM 时被调用。
connectedCallback () {
console.log('我已经插入了！！！嗷呜')
}
//当自定义元素与文档 DOM 断开连接时被调用。
disconnectedCallback () {
console.log('我已经断开了！！！嗷呜')
}
//当自定义元素被移动到新文档时被调用
adoptedCallback () {
console.log('我被移动了！！！嗷呜')
}
//当自定义元素的一个属性被增加、移除或更改时被调用
attributeChangedCallback () {
console.log('我被改变了！！！嗷呜')
}
}
// 1. 定义自定义元素'lz-btn'
window.customElements.define('lz-btn', Btn)
演示效果
看代码效果演示。
总结
在日常项目中，使用webComponent还是有一定的局限性，主要就是浏览器的兼容性问题。如果能解决这个问题，在不同的前端语言环境中使用这个功能做组件封装，也是不错的方案。
如果这篇文档对你有帮助，欢迎点赞、关注或者在评论区留言，我会第一时间对你的认可进行回应。精彩内容在后面，防止跑丢，友友们可以先关注我，每一篇文章都能及时通知不会遗失。
原文链接：https://juejin.cn/post/7235109911779246141 作者：程序员摩根
