浅析Web components的痛点

写在前面

最近致力于研究 Web components（以下简称WC），并且也初有成效的拿到了一定的结果，但今天想回过头来重新审视一下 WC。

WC 到底是什么？

简单的讲，Web Component 就是把组件封装成 html 标签的形式，并且在使用时不需要写额外的 js 代码。

组件是前端的发展方向，抛开周边技术生态，单纯看 React 和 Vue 都是组件框架。因此，WC 可以视为原生标签的拓展/延伸，说到底，它依旧是一个标签！

类似 <video></video> 标签，相比于原生标签，它多了更为丰富的样式和可操作属性。

谷歌公司由于掌握了 Chrome 浏览器，一直在推动浏览器的原生组件，即 Web Components API。

相比第三方框架，原生组件简单直接，符合直觉，不用加载任何外部模块，代码量小。貌似一切完美，似乎大有可以用来替换React、Vue之类的趋势。

目前存在的缺陷

与其它 web 框架一起使用存在一些小问题，会给开发体验上造成一些困扰。

1、组件内部事件的回调

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

class myDialog extends HTMLElement {
  // ...
  connectedCallback