Web Components系列(一) —— 概述

简介: 如果我们选择不使用任何框架的情况下来进行前端开发,那么针对一个完整的网页,我们需要开发以下代码:

14.png


前言


如果我们选择不使用任何框架的情况下来进行前端开发,那么针对一个完整的网页,我们需要开发以下代码:


  • HTML 代码
  • CSS 代码
  • JavaScript 代码


就几年之前来说,HTML 部分的代码基本不存在复用的可能,这就导致我们可能需要开发大量重复的 HTML 代码,即使使用  CV 法,代码的冗余却是不可避免的。


Web Components 诞生的背景


近几年,我们在使用前端框架(比如 Vue)时,都知道有个“组件”的概念,通过使用组件可以提高代码复用率,一次创建多处使用,在一定程度上简化了开发流程。


既然组件化开发这么流行,又能给开发带来极大的便利,那么浏览器就当然有理由来原生支持组件化,Web Components 就应运而生,它的诞生使得浏览器有了原生支持组件化的能力。


13.png


Web Components 的概念


何为 Web Components ?顾名思义,就是“网页组件”,引用 MDN 上的话来说就是:


Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web 应用中使用它们。


注意其中的关键词:可重用、定制,这也是我们乐于使用第三方框架中组件功能的理由。


Web Components 的组成


Web Components不是单一的规范,而是一系列的技术组成,包括Custom Element、Shadow DOM、HTML templates 三种技术规范。它们可以一起使用来创建封装功能的定制元素,可以在你喜欢的任何地方重用,不必担心代码冲突。


Custom elements(自定义元素)


一组JavaScript API,允许您定义custom elements及其行为,然后可以在您的用户界面中按照需要使用它们。


Shadow DOM(影子DOM)


一组JavaScript API,用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。


HTML templates(HTML模板)


<templete><slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。


Web Components 的兼容性


兼容性是检验一项技术能否用于生产环境的标准,我们来看一下 Web Components 各项技术的兼容性:


12.png


11.png


10.png


通过上图可以看到,Web Components 在主流浏览器上的支持已经极其良好,如果对向下兼容要求不严格的话,完全可以在生产环境中使用了。


总结


技术的发展总是以“提供便利”为方向的,Web Components 的出现可以说是前端技术发展的必然结果,而我们需要做的就是想办法善用它为自己服务。


~ 本文完,感谢阅读!


学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!




相关文章
|
9月前
|
XML 监控 数据格式
第六十六章 使用 Web 服务监控 IRIS - IRIS 对 WS-Monitoring 的支持概述
第六十六章 使用 Web 服务监控 IRIS - IRIS 对 WS-Monitoring 的支持概述
83 0
|
7月前
|
JavaScript 前端开发 API
Web Components详解-HTML Templates
Web Components详解-HTML Templates
114 6
|
7月前
|
设计模式 JavaScript 前端开发
Web Components详解-组件通信
Web Components详解-组件通信
142 6
|
7月前
|
JavaScript 前端开发
Web Components详解-Shadow DOM样式控制
Web Components详解-Shadow DOM样式控制
168 3
|
7月前
|
JavaScript API 开发者
Web Components详解-Shadow DOM插槽
Web Components详解-Shadow DOM插槽
64 1
|
7月前
|
JavaScript 前端开发 开发者
Web Components详解-Shadow DOM基础
Web Components详解-Shadow DOM基础
182 1
|
7月前
|
JavaScript 前端开发 API
Web Components详解-Custom Elements
Web Components详解-Custom Elements
196 0
|
9月前
|
前端开发 JavaScript vr&ar
前端新技术探索:WebAssembly、Web Components与WebVR/AR
【4月更文挑战第12天】WebAssembly、Web Components和WebVR/AR正重塑Web应用的未来。WebAssembly允许C/C++等语言在Web上高效运行,提供接近原生的性能,如游戏引擎。Web Components通过Custom Elements和Shadow DOM实现可复用的自定义UI组件,提升模块化开发。WebVR/AR(现WebXR)则让VR/AR体验无需额外应用,直接在浏览器中实现。掌握这些技术对前端开发者至关重要。
147 3
|
9月前
|
JavaScript 前端开发 架构师
Web Components:自定义元素与Shadow DOM的实践
Web Components是用于创建可重用自定义HTML元素的技术集合,包括Custom Elements、Shadow DOM、HTML Templates和Slots。通过Custom Elements定义新元素,利用Shadow DOM封装私有样式,&lt;slot&gt;元素允许插入内容。自定义元素支持事件处理和属性观察,可复用且样式隔离。它们遵循Web标准,兼容各前端框架,注重性能优化,如懒加载和Shadow DOM优化。
91 0
|
Rust 前端开发 JavaScript
用Rust搭建React Server Components 的Web服务器(三)
用Rust搭建React Server Components 的Web服务器(三)
142 0

热门文章

最新文章

  • 1
    打造高效的Web Scraper:Python与Selenium的完美结合
    13
  • 2
    Burp Suite Professional 2025.2 (macOS, Linux, Windows) - Web 应用安全、测试和扫描
    26
  • 3
    AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
    20
  • 4
    【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
    54
  • 5
    部署使用 CHAT-NEXT-WEB 基于 Deepseek
    342
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 7
    java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
    40
  • 8
    零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
    28
  • 9
    【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
    22
  • 10
    FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
    55