webComponent,shadowDom,js沙箱隔离,iframe简介。

1. webComponent这项技术听起来是非常陌生的，但是要谈起来还是得从shadowDom谈起。

但是要谈起shadowDom,我们可以先谈谈js的沙箱隔离，沙箱隔离机制是比较常见的比如说我们使用的微前端，又或者像iframe嵌入以及举例不太恰当的scoped等等

scoped:大家都用过，只要写了就可以避免样式污染对吧，这个原理就是很简单，无非就是给这个css加了一层tagId，因此普通的选择器自然选不中了，需要带有tagId的的才可以选中这个元素。

iframe:这种方案的话其实就是iframe 创建了一个独立的文档环境，内部的文档与外部的文档相互隔离。内部文档拥有自己的 DOM 树、CSS 样式和 JavaScript 环境，与外部文档的环境相互独立。这使得内部文档无法直接访问或修改外部文档的内容，从而实现了一定程度的隔离。

微前端的话我只举例qiankun,qiankun就是使用shadowDom这种方式的，听说当浏览器不支持shadow的话就改用scoped，反正没有采用iframe，具体我也不知道啊，没有采用iframe的理由很好理解,iframe对组件通信以及dom共享，还有url地址历史以及资源加载都不友好，这就是导致微前端放弃使用iframe的原因。

shadowDom:这玩意就是创建了一个Shadow Root，并 将元素和样式封装在shadow Root内部，使其不会受到外部的 CSS 影响，也不会影响到外部的 DOM 结构。在 Shadow DOM 内部定义的样式仅适用于 Shadow DOM 内部的元素，不会泄漏到外部。外部的样式也无法直接影响到 Shadow DOM 内部的元素，当然你也可以通过一些host选择器去改变样式啊。然而shadow Root对至于那种iframe哪些坏处是基本都没有啊，所以它就成为了微前端的选型理由。

然后最后说说webComponent,这玩意也就是类似于vue里边的组件化概念，只不过它采用的就是js内置的customElement这个api去自定义一些独立的元素，这些元素呢也就是可以直接使用的组件，然而webcompone并不是单指customElement，他里边还运用到了shadowDom等技术，通过shadowDom内置的一些api呢又可以达到沙盒以及slot的作用，这也就是webComponent的简单介绍了.

总结：iframe隔离是独立的文档环境，shadowDom是封装在shadowRoot内部，scoped是加了一层变量作用域，而qiankun则是通过shadowDom配合像那种proxy去代理window对象来达到让沙盒内部代码优先原则，同时在子组件里配置的bootStrap,mount,unmount钩子函数，来恢复快照的方式去实现样式隔离的，状态快照会在bootStrap阶段去保存，一份是原来的一份是内部改变之后的，当再次进入沙盒或者退出沙盒都可以减少性能消耗了，非常的方便。