在使用Web组件之前，我们先来看看上一篇文章中对Web组件的介绍，其中提到了相关的接口、属性和方法。 正是这些接口、属性和方法实现了Web组件的主要技术:自定义元素(自己设置元素)、影子DOM(影子DOM)和HTML模板(HTML模板) 因为不是所有的接口和接口中包含的方法都会用到，所以我们会从实际案例中逐渐了解Web组件的使用。 1:创建一个基本组件，包括一个输入框和一个按钮。 mian.jsclass SearchInput扩展html element { constructor(){ super()；//创建一个shadow rootlet shadow = this . attach shadow({ mode:' open ' })；const input = document . createelement(' input ')；input.setAttribute('type '，' text ')；input.setAttribute('class '，' input-vlaue ')；const button = document . createelement(' input ')；button.setAttribute('type '，' button ')；button.setAttribute('值'，'搜索')；//创建少量CSS，应用于shadow DOM let style = document . createelement(' style ')；style.textContent= "。输入值{ margin:5px；颜色:红色；}";shadow.append(输入)；shadow.append(按钮)；shadow.append(样式)；}}//声明var customElements:CustomElementRegistry；custom elements . define(' search-input '，search input)；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& lt搜索-输入& gt& lt/search-input & gt；& lt搜索-输入& gt& lt/search-input & gt；& lt搜索-输入& gt& lt/search-input & gt；& lt/body & gt；& lt/html & gt；结果实现了一个input+button的组件。 这里用到的技术有自定义元素(自己设置元素)和Shadow DOM(影子DOM)。 使用Shadow DOM的优点:Shadow DOM内部的元素永远不会影响其外部的元素。请注意，并不是每种类型的元素都可以附加到影子根。 出于安全原因，少数元素不能使用影子DOM(例如< a & gt)，以及许多其他元素 方法为指定的元素安装一个阴影DOM，并返回一个对ShadowRoot的引用。 方法:创建一个ShadowRoot并返回它:attach shadow(init:shadow root it):shadow root；attachShadow()的参数是一个对象，包含两个属性mode和delegatesFocus。 模式:可以打开/关闭 Open: shadow root元素可以从外部js访问根节点closed:拒绝访问关闭的shadow root节点Delegates从外部js委托Focus一个布尔值。当设置为true时，它指定缓解元素集本身的聚焦性能问题的行为。当shadow DOM的不可聚焦部分被点击后，让第一个可聚焦部分成为焦点，shadow host会提供所有可用的:focus样式。使用定制元素的好处:语义、简单、清晰。 customelements . define(' search-input '，searchinput)实现CustomElementRegistry接口，没有返回值:接口CustomElementRegistry { define(name:string，constructor:CustomElementConstructor，options？:ElementDefinitionOptions):void；get(name:string):any；升级(根:节点):void定义时(name:string):Promise & lt；void & gt；}需求二:但是，真正的组件不仅要有显示功能，还需要绑定少量的事件。例如，在上面的例子中，点击是如何触发搜索事件的？Core: element.addEventListener()代码示例(index.html不变):class search input Extensions HTML Element { constructor(){ super()；//创建一个shadow rootlet shadow = this . attach shadow({ mode:' open ' })；const input = document . createelement(' input ')；input.setAttribute('type '，' text ')；input.setAttribute('class '，' input-vlaue ')；const button = document . createelement(' input ')；button.setAttribute('type '，' button ')；button.setAttribute('值'，'搜索')；const text = document . createelement(' p ')；//创建少量CSS，应用于shadow DOM let style = document . createelement(' style ')；style.textContent= "。输入值{ margin:5px；颜色:红色；}";shadow.append(输入)；shadow.append(按钮)；shadow.append(文本)；shadow.append(样式)；button.addEventListener('click '，e = & gt{text.textContent = '按钮被单击~ ' })；}}//声明var customElements:CustomElementRegistry；custom elements . define(' search-input '，search input)；3.需求:我们知道，react和vue都有自己的组件状态管理，使用Props进行数据传输。那么，它是如何在web组件中实现的呢？Core: this.getAttribute(props)，类内部属性，life cycle main . jsclass search input扩展html element { constructor(){ super()；this . state = { count:0 }；//创建一个shadow rootlet shadow = this . attach shadow({ mode:' open ' })；const input = document . createelement(' input ')；input.setAttribute('type '，' text ')；input.setAttribute('class '，' input-value ')；const button = document . createelement(' input ')；button.setAttribute('type '，' button ')；button.setAttribute('值'，'搜索')；const text = document . createelement(' p ')；//创建少量CSS，应用于shadow DOM let style = document . createelement(' style ')；style.textContent= "。输入值{ margin:5px；颜色:红色；}";shadow.append(输入)；shadow.append(按钮)；shadow.append(文本)；shadow.append(样式)；button.addEventListener('click '，e = & gt{ this . state . count++；Text.textContent = `按钮被点击＄{ this . state . count }次。 ` });} connectedCallback(){ const default value = this . get attribute(' default value ')；const input = this . shadow root . query selector('。输入值’)；input.value =默认值；}}//声明var customElements:CustomElementRegistry；custom elements . define(' search-input '，search input)；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& lt搜索-输入默认值= "输入1 " >& lt/search-input & gt；& lt搜索-输入默认值="input2 " >& lt/search-input & gt；& lt搜索-输入默认值="input3 " >& lt/search-input & gt；& lt/body & gt；& lt/html & gt；这样一来，我们已经了解了如何使用Web组件创建一个组件，如何触发组件的事件，如何使用props向组件传输数据，以及组件内部的状态管理。 目前缺少的是组件之间的通信。目前还没有类似react和vue的组件间通信方式。但是，我们可以使用localStorage、StorageEvent来间接生成组件和呈现接口之间的通信。