你知道原生HTML组件是什么吗?原生HTML组件的介绍

本篇文章给大家带来的内容是关于你知道原生HTML组件是什么吗?原生HTML组件的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

嘿!看看这几年啊,Web 前端的发展可是真快啊!

想想几年前,HTML 是前端开发者的基本技能,通过各式各样的标签就可以搭建一个可用的网站,基本交互也不是问题。如果再来点 CSS,嗯,金黄酥脆,美味可口。这时候再撒上几把 JavaScript,简直让人欲罢不能。

随着需求的增长,HTML 的结构越来越复杂,大量重复的代码使得页面改动起来异常困难,这也就孵化了一批批模版工具,将公共的部分抽取出来变为公共组件。再后来,随着 JavaScript 的性能提升,JavaScript 的地位越来越高,不再只是配菜了,前端渲染的出现降低了服务端解析模版的压力,服务端只要提供静态文件和 API 接口就行了嘛。再然后,前端渲染工具又被搬回了服务端,后端渲染出现了(黑人问号???)

总之,组件化使得复杂的前端结构变得清晰,各个部分独立起来,高内聚低耦合,使得维护成本大大降低。

那么,你有听说过原生 HTML 组件吗?

1754597496-5bc7f1ee5c154_articlex.jpg

四大 Web 组件标准

在说原生 HTML 组件之前,要先简单介绍一下四大 Web 组件标准,四大 Web 组件标准分别为:HTML Template、Shadow DOM、Custom Elements 和 HTML Imports。实际上其中一个已经被废弃了,所以变成“三大”了。

HTML Template 相信很多人都有所耳闻,简单的讲也就是 HTML5 中的