WebComponents系列（一）——概述

前言如果我们选择不使用任何框架进行前端开发，那么对于一个完整的网页，我们需要开发如下代码：HTML代码CSS代码JavaScript代码随便几句yearsago一般来说，HTML部分的代码基本上没有复用的可能，导致需要开发大量重复的HTML代码。即使使用CV方法，代码的冗余也是不可避免的。WebComponents诞生的背景近年来，我们在使用前端框架（如Vue）时，都知道有一个“组件”的概念。通过使用组件，可以提高代码复用率，可以一次创建多个用途。在一定程度上简化了开发过程。现在组件化开发如此流行，能够给开发带来极大的便利，浏览器有理由原生支持组件化，WebComponents应运而生。它的诞生让浏览器原生支持组件化的能力。WebComponents的概念什么是WebComponents？顾名思义，就是“WebComponents”，引用MDN上的话：WebComponentsisasetofdifferenttechnologiesthatallowyoutocreatereusablecustomelements(theirfunctionsencapsulatedoutsideyourcode)andinyourwebusethemin应用程序。注意关键词：可复用、可定制，这也是我们乐于在第三方框架中使用组件功能的原因。WebComponents的组成WebComponents不是一个单一的规范，而是一系列的技术组件，包括三个技术规范：CustomElement、ShadowDOM和HTMLtemplates。它们可以一起使用来创建封装功能的自定义元素，并且可以在您喜欢的任何地方重复使用，而不必担心代码冲突。自定义元素（customelements）一组JavaScriptAPI，允许您定义自定义元素及其行为，然后可以根据需要在您的用户界面中使用这些元素。影子DOM（ShadowDOM）一组JavaScriptAPI，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制它们的相关功能。这样，您可以将元素的功能保密，这样就可以编写脚本和设置样式，而不必担心与文档的其余部分发生冲突。HTML模板(HTMLtemplate)和元素允许您编写不显示在渲染页面中的标记模板。然后它们可以作为自定义元素结构的基础多次重复使用。WebComponents的兼容性兼容性是测试一项技术能否在生产环境中使用的标准。再来看看WebComponents各种技术的兼容性：从上图可以看出，主流浏览器对WebComponents的支持已经是非常好的了，如果对向后兼容的要求不严格的话，可以用于生产环境。综上所述，科技的发展总是以“提供便利”为导向。WebComponents的出现可以说是前端技术发展的必然结果，而我们要做的就是想办法利用好它来为我们自己服务。~~本文到此结束，感谢阅读！~学习有趣的知识，认识有趣的朋友，塑造有趣的灵魂！大家好，我是〖编程三昧〗的作者王隐，我的公众号是《编程三昧》，欢迎关注，希望大家多多指教！