基于组件和标签语义是前台的发展趋势。 目前比较流行的组件化框架有React、Vue等。，而标签的语义包括文章、对话等。在H5补充。 Web组件是一组类似的技术，允许您创建可重用的定制元素，并在Web应用程序中使用它们。 Web组件由三种主要技术组成，它们可以一起使用来创建封装功能的自定义元素，并且可以在任何您喜欢的地方重用，而不用担心代码冲突。 自定义元素:一组JavaScript API，允许您定义自定义元素及其行为，然后根据需要在您的客户界面中使用它们。 影子DOM:一组JavaScript API，用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其相关功能。 通过这种方式，您可以将元素的功能保持为私有，这样就可以编写它们的脚本和样式，而不用担心与文档的其他部分发生冲突。 HTML模板(HTML模板):< template & gt和<插槽>；元素允许您编写不在呈现的页面中显示的标记模板。 然后，它们可以作为建立自己的元素结构的基础被重复使用。 实现web组件的基本方法通常如下:创建一个类或函数来指定web组件的功能。如果使用类，请使用ECMAScript 2015的类语法(有关更多信息，请参见类)。 使用CustomElementRegistry.define()方法注册新的自我设置元素，并向其传递要定义的元素的名称、指定该元素功能的类以及它继承的元素(可选)。 如有必要，使用Element.attachShadow()方法将阴影DOM附加到您自己的set元素。 使用常用的DOM方法添加子元素、事件侦听器等。去跟踪多姆。 使用 使用常规DOM方法再次克隆模板，并将其附加到影子DOM。 在页面上您喜欢的任何地方使用您自己的设置元素，就像使用常规的HTML元素一样。 做一个简单的显示文本的例子，感受一下下面的Web组件代码如下:main . jsclass show text extensions html element { constructor(){ super()} connectedcallback(){ const text = this . get attribute(' text ')；this.outerHTML = ` & ltdiv style = " color:red；"& gt文本: <标签& gt$ { text } & lt/label & gt；& lt/div & gt；`;} } customelements . define(' show-text '，show text)；index.html & lt！DOCTYPE html & gt& lthtml lang = " en " & gt& lthead & gt& ltmeta charset="UTF-8 " >& ltmeta name = " viewport " content = " width =设备宽度，initial-scale=1.0 " >& lttitle & gt文档& lt/title & gt；& lt脚本src= "。/main . js " & gt；& lt/script & gt；& lt/head & gt；& ltbody & gt& ltshow-text text = " hello world " & gt；& lt/show-text & gt；& ltshow-text text = " Hello " >:& lt；/show-text & gt；& lt/body & gt；& lt/html & gt；测试结果会慢慢整理一个知识点~参考地址:https://developer . Mozilla . org/zh-CN/docs/Web/Web _ Components。