随着需求的增长，HTML 的结构越来越复杂，大量重复的代码使得页面改动起来异常困难，这也就孵化了一批批模版工具，将公共的部分抽取出来变为公共组件。再后来，随着
JavaScript 的性能提升，JavaScript
的地位越来越高，不再只是配菜了，前端渲染的出现降低了服务端解析模版的压力，服务端只要提供静态文件和 API
接口就行了嘛。再然后，前端渲染工具又被搬回了服务端，后端渲染出现了（黑人问号？？？）
总之，组件化使得复杂的前端结构变得清晰，各个部分独立起来，高内聚低耦合，使得维护成本大大降低。
那么，你有听说过原生 HTML 组件吗？
四大 Web 组件标准
在说原生 HTML 组件之前，要先简单介绍一下四大 Web 组件标准，四大 Web 组件标准分别为：HTML
Template、Shadow DOM、Custom Elements 和 HTML
Imports。实际上其中一个已经被废弃了，所以变成“三大”了。
HTML Template 相信很多人都有所耳闻，简单的讲也就是 HTML5 中的 标签，正常情况下它无色无味，感知不到它的存在，甚至它下面的 img 都不会被下载，script 都不会被执行。 就如它的名字一样，它只是一个模版，只有到你用到它时，它才会变得有意义。
Shadow DOM 则是原生组件封装的基本工具，它可以实现组件与组件之间的独立性。
Custom Elements 是用来包装原生组件的容器，通过它，你就只需要写一个标签，就能得到一个完整的组件。
HTML
Imports 则是 HTML 中类似于 ES6 Module 的一个东西，你可以直接 import 另一个 html 文件，然后使用其中的
DOM 节点。但是，由于 HTML Imports 和 ES6 Module 实在是太像了，并且除了 Chrome
以外没有浏览器愿意实现它，所以它已经被废弃并不推荐使用了。未来会使用 ES6 Module 来取代它，但是现在貌似还没有取代的方案，在新版的
Chrome 中这个功能已经被删除了，并且在使用的时候会在 Console 中给出警告。警告中说使用 ES Modules 来取代，但是我测试在
Chrome 71 中 ES Module 会强制检测文件的 MIME 类型必须为 JavaScript 类型，应该是暂时还没有实现支持。
Shadow DOM
要说原生 HTML 组件，就要先聊聊 Shadow DOM 到底是个什么东西。
大家对 DOM 都很熟悉了，在 HTML 中作为一个最基础的骨架而存在，它是一个树结构，树上的每一个节点都是 HTML 中的一部分。DOM 作为一棵树，它拥有着上下级的层级关系，我们通常使用“父节点”、“子节点”、“兄弟节点”等来进行描述（当然有人觉得这些称谓强调性别，所以也创造了一些性别无关的称谓）。子节点在一定程度上会继承父节点的一些东西，也会因兄弟节点而产生一定的影响，比较明显的是在应用 CSS Style 的时候，子节点会从父节点那里继承一些样式。
而 Shadow DOM，也是 DOM 的一种，所以它也是一颗树，只不过它是长在 DOM 树上的一棵特殊的紫薯，啊不，子树。
什么？DOM 本身不就是由一棵一棵的子树组成的吗？这个 Shadow DOM 有什么特别的吗？
Shadow DOM 的特别之处就在于它致力于创建一个相对独立的一个空间，虽然也是长在 DOM 树上的，但是它的环境却是与外界隔离的，当然这个隔离是相对的，在这个隔离空间中，你可以选择性地从 DOM 树上的父节点继承一些属性，甚至是继承一棵 DOM 树进来。
利用 Shadow DOM 的隔离性，我们就可以创造原生的 HTML 组件了。
实际上，浏览器已经通过 Shadow DOM 实现了一些组件了，只是我们使用过却没有察觉而已，这也是 Shadow DOM 封装的组件的魅力所在：你只管写一个 HTML 标签，其他的交给我。（是不是有点像 React 的 JSX 啊？）
我们来看一看浏览器利用 Shadow DOM 实现的一个示例吧，那就是 video 标签：
我们来看一下浏览器渲染的结果：
等一下！不是说 Shadow DOM 吗？这和普通 DOM 有啥区别？？？
在 Chrome 中，Elements 默认是不显示内部实现的 Shadow DOM 节点的，需要在设置中启用：
注：浏览器默认隐藏自身的 Shadow DOM 实现，但如果是用户通过脚本创造的 Shadow DOM，是不会被隐藏的。
然后，我们就可以看到 video 标签的真面目了：
在这里，你可完全像调试普通 DOM 一样随意调整 Shadow DOM 中的内容（反正和普通 DOM 一样，刷新一下就恢复了）。
由于 Shadow DOM 实际上也是 DOM 的一种，所以在 Shadow DOM 中还可以继续嵌套 Shadow DOM，就像上面那样。
浏览器中还有很多 Element 都使用了 Shadow DOM 的形式进行封装，比如 、
由于 Shadow DOM 的隔离性，所以即便是你在外面写了个样式：div { background-color: red !important; }，Shadow DOM 内部的 div 也不会受到任何影响
也就是说，写样式的时候，该用 id 的时候就用 id，该用 class 的时候就用 class，一个按钮的 class 应该写成 .button 就写成 .button。完全不用考虑当前组件中的 id、class 可能会与其他组件冲突，你只要确保一个组件内部不冲突就好——这很容易做到。
这解决了现在绝大多数的组件化框架都面临的问题：Element 的 class(className) 到底怎么写？用前缀命名空间的形式会导致 class 名太长，像这样：.header-nav-list-sublist-button-icon；而使用一些 CSS-in-JS 工具，可以创造一些唯一的 class 名称，像这样：.Nav__welcomeWrapper___lKXTg，这样的名称仍旧有点长，还带了冗余信息。
ShadowRoot
ShadowRoot 是 Shadow DOM 下面的根，你可以把它当做 DOM 中的
一样看待，但是它不是 ，所以你不能使用 上的一些属性，甚至它不是一个节点。
你可以通过 ShadowRoot 下面的 appendChild、querySelectorAll 之类的属性或方法去操作整个 Shadow DOM 树。
在定义了自定义组件后，我们需要将它注册到 HTML 标签列表中，通过 window.customElements.define() 函数即可实现，这个函数接受两个必须参数和一个可选参数。第一个参数是注册的标签名，为了避免和 HTML 自身的标签冲突，Custom Elements 要求用户自定义的组件名必须至少包含一个短杠 -，并且不能以短杠开头，比如 my-element、awesome-button 之类都是可以的。第二个参数是注册的组件的 class，直接将继承的子类类名传入即可，当然也可以直接写一个匿名类：
window.customElements.define('my-element', class extends HTMLElement {
...
});
注册之后，我们就可以使用了，可以直接在 html 文档中写对应的标签，比如：，也可以通过 document.createElement('my-element') 来创建，用法与普通标签几乎完全一样。但要注意的是，虽然 html 标准中说部分标签可以不关闭或是自关闭( 或是 )，但是只有规定的少数几个标签允许自关闭，所以，在 html 中写 Custom Elements 的节点时必须带上关闭标签。
由于 Custom Elements 是通过 JavaScript 来定义的，而一般 js 文件都是通过
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)