浅析Web components的痛点

写在前面

最近致力于研究 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);

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

2、组件样式覆盖

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