摘要：未来会使用来取代它，但是现在貌似还没有取代的方案，在新版的中这个功能已经被删除了，并且在使用的时候会在中给出警告。
嘿！看看这几年啊，Web 前端的发展可是真快啊！四大 Web 组件标准想想几年前，HTML 是前端开发者的基本技能，通过各式各样的标签就可以搭建一个可用的网站，基本交互也不是问题。如果再来点 CSS，嗯，金黄酥脆，美味可口。这时候再撒上几把 JavaScript，简直让人欲罢不能。
随着需求的增长，HTML 的结构越来越复杂，大量重复的代码使得页面改动起来异常困难，这也就孵化了一批批模版工具，将公共的部分抽取出来变为公共组件。再后来，随着 JavaScript 的性能提升，JavaScript 的地位越来越高，不再只是配菜了，前端渲染的出现降低了服务端解析模版的压力，服务端只要提供静态文件和 API 接口就行了嘛。再然后，前端渲染工具又被搬回了服务端，后端渲染出现了（黑人问号？？？）
总之，组件化使得复杂的前端结构变得清晰，各个部分独立起来，高内聚低耦合，使得维护成本大大降低。
那么，你有听说过原生 HTML 组件吗？
在说原生 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 树上的一棵特殊的紫薯
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/98462.html
阅读 1744·2021-10-19 13:30
阅读 1308·2021-10-14 09:48
阅读 1487·2021-09-22 15:17
阅读 1988·2019-08-30 15:52
阅读 3246·2019-08-30 11:23
阅读 1955·2019-08-29 15:27
阅读 867·2019-08-29 13:55
阅读 737·2019-08-26 14:05
