自定义组件开发，正常需要依托于框架本身(vue,react等)，而Web Components可以做到原生组件自定义，在不同框架中使用也能兼容
下面通过实现一个自定义按钮来了解 Web Components是怎样工作的
- 声明一个自定义按钮
页面展示（识别不了这是一个按钮）：
- 通过class声明一个自定义按钮
class zdyButton extends HTMLElement{
constructor(){
super()
//创建一个shadom
let shadow = this.attachShadow({mode:'open'})
let btn = document.createElement('button')
btn.className = 'zdy-btn'
let slot = document.createElement('slot')
slot.innerHTML = '默认按钮'
btn.appendChild(slot)
const style = document.createElement('style');
const types = {
'primary':{
backgroundColor:'#409eff',
color:'#fff'
},
'default':{
backgroundColor:'#c8c9cc',
color:'#fff'
}
}
const btnType = this.getAttribute('type') || 'default';
style.innerHTML = `
.zdy-btn {
outline:none;
border:none;
border-radius:4px;
display:inline-block;
cursor:pointer;
padding:6px 20px;
}
`
shadow.appendChild(style);
shadow.appendChild(btn);
}
}
- 通过customElements注册到页面上
window.customElements.define('zdy-button',zdyButton)
页面展示：
原理：
实际在自定义元素内部创建了一个shadow-dom,实际渲染就是shadow-dom中的这一部分，而且元素可以保持私有性，不会因为类名等的冲突，出现问题
以上，就可以通过web components实现一个自定义组件
缺点（存在兼容性问题）：
参考：
