乐趣区

关于web-components:浅析Web-components的痛点

jiezi

写在后面

最近致力于钻研 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、组件外部事件的回调

比方，一个弹窗组件（<my-dialog></my-dialog>）中的确定按钮，那么它的事件是如何触发的呢？

class myDialog extends HTMLElement {
  // ...
  connectedCallback() {const shadowRoot = this.attachShadow({ mode: 'open'});
    shadowRoot.innerHTML = `
      <div class="dialog">
        <div class="dialog-content">
          <div class="dialog-body">
            弹窗内容
          </div>

          <button id="okBtn"> 确定 </button>
        </div>
      </div>
    `;

    shadowRoot.querySelector('#okBtn').addEventListener('click', () => {
      // 组件外部定义事件
      this.dispatchEvent(new CustomEvent('okBtnFn'));
    });
  }
}

customElements.define('my-dialog', myDialog);

当初计划是 custom element 外部自定义事件 new CustomEvent()，内部用 addEventListener监听。这样的写法是很俊俏的，好像又回到了原生 JS 写利用的时代。

<my-dialog></my-dialog>

<script>
  export default {created() {document.addEventListener('okBtnFn', function(){// 点击弹窗按钮，触发回调事件});
    }
  }
</script>

2、组件款式笼罩

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

退出移动版