浅析Web|浅析Web components的痛点浅析Webcomponents的痛点

写在前面最近致力于研究 Web components（以下简称WC），并且也初有成效的拿到了一定的结果，但今天想回过头来重新审视一下 WC。
WC 到底是什么？组件是前端的发展方向，抛开周边技术生态，单纯看 React 和 Vue 都是组件框架。
谷歌公司由于掌握了 Chrome 浏览器，一直在推动浏览器的原生组件，即 Web Components API。相比第三方框架，原生组件简单直接，符合直觉，不用加载任何外部模块，代码量小。貌似一切完美，似乎大有可以用来替换你喜欢的库或框架。
很多人也提出过将它与三大前端框架比较，比如《Web Component 和类 React、Angular、Vue 组件化技术谁会成为未来？》，其实它们是两个领域的东西，不具有可比性。WC 最大的优势在于 CSS 防污染，浏览器原生支持的组件化实现；而 Vue 等 MVVM 框架注重数据分离和自动化绑定的实现。且 WC 中包含的 4 大 web api 是标准规范，使用上滞后性（比如新落地的规范往往要等几年后才会被人拿出来使用），但 vue、react、ng 等框架不会。
目前存在的缺陷与其它 web 框架一起使用存在一些小问题，会给开发体验上造成一些困扰。
1、组件内部事件的回调
比如，一个弹窗组件（）中的确定按钮，那么它的事件是如何触发的呢？

class myDialog extends HTMLElement { // ... connectedCallback() { const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = `弹窗内容`; shadowRoot.querySelector('#okBtn').addEventListener('click', () => { // 组件内部定义事件 this.dispatchEvent(new CustomEvent('okBtnFn')); }); } }customElements.define('my-dialog', myDialog);

【浅析Web|浅析Web components的痛点】现在方案是 custom element 内部自定义事件 new CustomEvent()，外部用 addEventListener监听。这样的写法是很丑陋的，仿佛又回到了原生 JS 写应用的时代。

2、组件样式覆盖
对于开发者来说，难免会遇到需要调整组件内部样式的时候。无论你是使用antd、vant还是使用其它组件库，但 WC 的 CSS 防污染机制导致你很难修改内部样式。这需要你付出一些代价来变相的修改内部样式，具体方式我在上一篇文章中有写《Web Components中引入外部CSS的 8 种方法》，其实是很繁琐，且不符合开发者直觉的。