【Web组件】Web组件痛点分析
写在前面。最近致力于Web组件（以下简称WC）的研究，一开始也取得了一些成绩，但今天想回过头来重新审视一下WC。WC究竟是什么？引用MDN上的解释：WebComponents由几种独立的技术组成。您可以将Web组件视为使用开放Web技术创建的可重用用户界面小部件。它们是浏览器的一部分，因此不需要像jQuery或Dojo这样的外部库。无需编写代码即可使用现有的Web组件，只需将导入语句添加到HTML页面即可。Web组件使用新的或仍在开发的标准浏览器功能。简单的说，WebComponent就是将组件封装成html标签的形式，使用时无需额外编写js代码。组件化是前端的发展方向。不管周围的技术生态如何，React和Vue都是组件框架。所以，WC也算是原生标签的延伸/延伸，毕竟还是标签！与标签类似，拥有比原生标签更丰富的样式和可操作属性。得益于对Chrome浏览器的掌握，谷歌一直在推动浏览器的原生组件WebComponentsAPI。与第三方框架相比，原生组件简单、直接、直观，无需加载任何外部模块，代码量小。看起来一切都很完美，似乎可以用来替代React、Vue等潮流。也有不少人提出将其与三大前端框架进行比较，比如《Web Component 和类 React、Angular、Vue 组件化技术谁会成为未来？》。其实它们是两个领域的东西，没有可比性。WC最大的优势在于CSS抗污染和浏览器原生支持的组件化实现；而Vue等MVVM框架则侧重于数据分离和自动绑定的实现。而且WC包含的四大WebAPI都是标准规范，在使用上存在滞后性（比如新实现的规范往往要等上几年才能使用），但是vue、react、而ng没有。目前存在的缺陷与其他web框架一起使用时会出现一些小问题，会给开发体验带来一些困扰。1、组件内部事件的回调比如一个弹窗组件（）中的确定按钮，它的事件是如何触发的？classmyDialogextendsHTMLElement{//...connectedCallback(){constshadowRoot=this.attachShadow({mode:'open'});shadowRoot.innerHTML=`弹出内容
OK `;shadowRoot.querySelector('#okBtn').addEventListener('click',()=>{//在组件内部定义事件this.dispatchEvent(newCustomEvent('okBtnFn'));});}}customElements.define('my-dialog',myDialog);现在解决方案是自定义元素内部自定义事件newCustomEvent()，外部使用addEventListener来监听。这种写法非常难看，仿佛回到了原生JS写应用的时代。
constform=document.getElementById('myform');form.addEventListener('submit',e=>{e.preventDefault();console.log('Submitteddata:');constdata=newFormData(form);for(letnvofdata.entries()){console.log(`${nv[0]}:${nv[1]}`);}});提交时获取不到input-age的值。当然会有解决方案，但是会很复杂。点击查看其他表单标签取值解决方案参考：点击查看5.其他另外，缺少数据绑定和状态管理也是WC的缺陷，这里不再赘述。后面写的WC指的是HTML丰富的DOM特性，让HTML具有更强大的复用性。WC可以直接作为原生标签，运行在任何前端框架或无框架中。结合目前主流的技术栈，目前WC的主要问题在复杂组件中，数据通信和事件传递有一定的成本兼容性问题，比如：part方法可以覆盖内部样式。
