最近看领导们讨论微前端架构的问题，当中大家伙讨论样式隔离的时候说到了Shadow DOM。
这个Shadow DOM是啥，其实就是Web Components规范中的一个技术，距离上次了解Web Components已经是两年前的事情了，最近正好不是很忙，再复习下。
一，Web Components是什么？
Web Components是一套web组件规范，利用该规范我们可以在浏览器中自定义标签，而在我们自定义的标签中可以最大程度的实现组件化；换句话说Web Components其实就是原生的组件化规范。
Web Components规范最大的目的就是让我们可以定制出高度服用的组件化标签，大大减少我们开发人员的开发成本。Web Components一共由三项主要技术组成：
- 1， Custom Elements(自定义元素)： 一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。
- 2， Shadow DOM(影子DOM)： 一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
- 3， HTML templates（HTML模板）：
<template>和<slot>元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
二，为什么要使用Web Components？
还要问？因为吊啊！
玩笑话，其实是因为现在的前端开发越来越强调组件化开发，采用组件化开发的有点如下（参考阮一峰老师的文章）：
-
有利于代码复用。组件是模块化编程思想的体现，可以跨平台、跨框架使用，构建、部署和与其他 UI 元素互动都有统一做法。
-
使用非常容易。加载或卸载组件，只要添加或删除一行代码就可以了。
-
开发和定制很方便。组件开发不需要使用框架，只要用原生的语法就可以了。开发好的组件往往留出接口，供使用者设置常见属性，比如上面代码的
heading属性，就是用来设置对话框的标题。 -
组件提供了 HTML、CSS、JavaScript 封装的方法，实现了与同一页面上其他代码的隔离。
说白了就是如果可以的话我们希望开发网站页面可以像小孩子搭积木一样，少什么就添加什么，页面可以拖拖拽拽的动作就出来了。
