WebComponents简介

时间：2023-04-02 20:05:32 HTML

WebComponents是什么？Web组件由三种独立的技术组成：自定义元素。很简单，这些是完全有效的HTML元素，其中包含使用一组JavaScriptAPI制作的自定义模板、行为和标记名称（例如）。自定义元素在HTMLLivingStandard规范中定义。影子DOM。能够隔离CSS和JavaScript，例如。这是在LivingStandardDOM规范中定义的。HTML模板。HTML中的用户定义模板，在调用之前不会呈现。<template>标签在HTMLLivingStandard规范中定义。这些构成了Web组件规范。HTML模块可能是堆栈中的第四项技术，但它尚未在四大浏览器中实现。Chrome团队已经宣布他们打算在未来的版本中实现这些。WebComponents通常在除MicrosoftEdge和InternetExplorer11之外的所有主要浏览器中可用，但也有一些工具可以填补这些空白。每种技术都可以独立使用，也可以与任何其他技术结合使用。换句话说，它们并不相互排斥。自定义元素（customelements）顾名思义，自定义元素就是<div>、<section>或<article>等HTML元素，但我们可以通过浏览器API来定义自己的名字。自定义元素类似于那些标准的HTML元素，如<news-slider>或<bacon-cheeseburger>。展望未来，浏览器供应商已承诺不会创建名称中带有破折号的新内置元素，以防止冲突。自定义元素包含它们自己的语义、行为、标记，并且可以跨框架和浏览器共享。JSclassMyComponentextendsHTMLElement{connectedCallback(){this.innerHTML=`<h1>Helloworld</h1>`;}}customElements.define('my-component',MyComponent);HTMl<my-component></my-component>ResultHelloworld在这个例子中，我们定义了<my-component>，我们自己的HTML元素。诚然，它的作用不大，但它是自定义元素的基本构建块。所有自定义元素都必须以某种方式扩展HTMLElement以便在浏览器中注册。自定义元素在没有第三方框架的情况下存在，浏览器供应商除了保证根据规范编写的组件不会破坏API更改外，还致力于规范的持续向后兼容性。更重要的是，这些组件通常可以与最流行的现有框架一起使用，包括Angular、React、Vue等，只需很少的努力。ShadowDOMShadowDOM是DOM的封装版本。这允许作者有效地将DOM片段彼此隔离，包括任何可用作CSS选择器的内容以及与之关联的样式。通常，文档范围内的任何东西都称为lightDOM，shadowroot内的任何东西都称为shadowDOM。使用轻型DOM时，可以使用document.querySelector('selector')或通过使用element.querySelector('selector')定位任何元素的子元素来选择元素；同理可以通过调用shadowRoot.querySelector来定位shadowRoot.querySelector根的子节点，其中shadowRoot是对文档片段的引用——不同的是影子根的子节点不能从轻量级DOM中选择。例如，如果我们有一个带有<button>的影子根，调用shadowRoot.querySelector('button')将返回我们的按钮，但不调用文档的查询选择器将返回元素，因为它属于不同的DocumentOrShadowRoot实例.样式选择器的工作方式相同。在这方面，shadowDOM的工作方式类似于<iframe>，其中的内容与文档的其余部分是隔离的；然而，当我们创建影子根时，我们仍然可以完全控制页面的那部分，但会根据上下文进行操作。这就是我们所说的封装。如果您曾经编写过重复使用相同内容或依赖CSS-in-JS工具或CSS命名策略（如BEM）的组件，那么影子DOM有可能改善您的开发人员体验。设想以下场景：<div><divid="example"><#shadow-root><style>button{白颜色;}</style><buttonid="button">这将使用CSS背景番茄</button></#shadow-root></div><buttonid="button">不是番茄</button></div>除了<#shadow-root>的伪代码（此处用于划分没有HTML元素的阴影边界）外，HTML完全有效。将影子根附加到上面的节点，例如：constshadowRoot=document.getElementById('example').attachShadow({mode:'open'});shadowRoot.innerHTML=`<style>button{color:tomato;}</style><buttonid="button">这将使用CSS颜色番茄<slot></slot></button>`;HTML模板HTML<template>元素允许我们删除不会立即呈现但可以稍后使用的可重用代码模板。HTML<templateid="book-template"><li><spanclass="title"></span>—<spanclass="author"></span></li></template><ulid="books"></ul>在脚本使用模板之前，上面的示例不会呈现任何内容，实例化后代码将告诉浏览器如何处理它。JSconstfragment=document.getElementById('book-template');constbooks=[{title:'了不起的盖茨比',author:'F.ScottFitzgerald'},{title:'永别了，武器',author:'ErnestHemingway'},{title:'Catch22',author:'JosephHeller'}];books.forEach(book=>{//创建模板内容实例constinstance=document.importNode(fragment.content,true);//添加相关内容到模板中instance.querySelector('.title').innerHTML=book.title;instance.querySelector('.author').innerHTML=book.author;//将实例附加到DOMdocument.getElementById('books').appendChild(instance);});请注意，此示例创建的模板(<templateid="book-template">)没有任何其他Web组件技术，同样，堆栈中的三种技术可以单独使用或一起使用。</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="前端面试日常3+1——Day844" href="/webqianduan/232613.html">前端面试日常3+1——Day844</a> </div> <div class="prev">下一篇：<a title="前端组件化——优质高效的协作利器" href="/webqianduan/232615.html">前端组件化——优质高效的协作利器</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>WebComponents简介相关文章</code></div> <ul> <li><a href="/shujuyingyong/283111.html" target="_blank" title="Redis的读写操作和原理简介">Redis的读写操作和原理简介</a></li> <li><a href="/shujuyingyong/283091.html" target="_blank" title="Redis的数据结构简介：如何选择合适的类型存储数据">Redis的数据结构简介：如何选择合适的类型存储数据</a></li> <li><a href="/shujuyingyong/281809.html" target="_blank" title="SQL Server的数据结构简介：表、索引和视图">SQL Server的数据结构简介：表、索引和视图</a></li> <li><a href="/shujuyingyong/280905.html" target="_blank" title="SQL Server简介：一款功能强大的数据库管理系统">SQL Server简介：一款功能强大的数据库管理系统</a></li> <li><a href="/xinxifazhan/280287.html" target="_blank" title="通信网络设备的种类和功能简介">通信网络设备的种类和功能简介</a></li> <li><a href="/xinxifazhan/280195.html" target="_blank" title="《通信原理第六版》PDF下载及内容简介">《通信原理第六版》PDF下载及内容简介</a></li> <li><a href="/xinxifazhan/278750.html" target="_blank" title="通信原理樊昌信第六版pdf下载及内容简介">通信原理樊昌信第六版pdf下载及内容简介</a></li> <li><a href="/xinxifazhan/278621.html" target="_blank" title="通信原理简介：从信号到信息的转换过程">通信原理简介：从信号到信息的转换过程</a></li> <li><a href="/xinxifazhan/277940.html" target="_blank" title="北京邮电大学通信工程学院23年硕士研究生招生简介">北京邮电大学通信工程学院23年硕士研究生招生简介</a></li> <li><a href="/xinxifazhan/276613.html" target="_blank" title="通信工程专业简介：培养目标、课程设置和就业方向">通信工程专业简介：培养目标、课程设置和就业方向</a></li> <li><a href="/xinxifazhan/275928.html" target="_blank" title="通信专业技术人员初级职业资格证书考试简介">通信专业技术人员初级职业资格证书考试简介</a></li> <li><a href="/bianchengyuyan/269084.html" target="_blank" title="C#使用SharpZipLib压缩和解压文件分享">C#使用SharpZipLib压缩和解压文件分享</a></li> <li><a href="/linux/263032.html" target="_blank" title="硬链接和软链接详解">硬链接和软链接详解</a></li> <li><a href="/linux/263009.html" target="_blank" title="GSettings简介">GSettings简介</a></li> <li><a href="/linux/262985.html" target="_blank" title="每天学一个Linux命令（108）：iptraf">每天学一个Linux命令（108）：iptraf</a></li> <li><a href="/linux/262959.html" target="_blank" title="ProcessManager-supervisor">ProcessManager-supervisor</a></li> <li><a href="/linux/262907.html" target="_blank" title="每天学一个Linux命令（61）：wget">每天学一个Linux命令（61）：wget</a></li> <li><a href="/linux/262904.html" target="_blank" title="Vim基本操作">Vim基本操作</a></li> <li><a href="/linux/262817.html" target="_blank" title="apt-cache命令">apt-cache命令</a></li> <li><a href="/linux/262774.html" target="_blank" title="Linux编辑器Vim">Linux编辑器Vim</a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/366793.html" title="2017年智能家居行业分析" target="_blank">2017年智能家居行业分析</a></li> <li><em>2</em><a href="/kejifunen/364613.html" title="智能家居简介 PIR红外传感器概述" target="_blank">智能家居简介 PIR红外传感器概述</a></li> <li><em>3</em><a href="/kejifunen/358214.html" title="如何打造家庭影院？ " target="_blank">如何打造家庭影院？ </a></li> <li><em>4</em><a href="/kejifunen/356759.html" title="奇怪的参赛者合集- 2017世界机器人大会简介" target="_blank">奇怪的参赛者合集- 2017世界机器人大会简介</a></li> <li><em>5</em><a href="/kejifunen/356704.html" title="上海泽邦科技有限公司简介" target="_blank">上海泽邦科技有限公司简介</a></li> <li><em>6</em><a href="/kejifunen/345733.html" title="CES简介！高通的第二战场" target="_blank">CES简介！高通的第二战场</a></li> <li><em>7</em><a href="/kejifunen/343417.html" title="未来简介-李连杰：未来人类将如何与机器人共存" target="_blank">未来简介-李连杰：未来人类将如何与机器人共存</a></li> <li><em>8</em><a href="/kejifunen/338400.html" title="车子出了什么问题？｜《自动时代：无人驾驶重塑世界》简介" target="_blank">车子出了什么问题？｜《自动时代：无人驾驶重塑世界》简介</a></li> <li><em>9</em><a href="/jishuluodi/334909.html" title="深圳市前海海吉跨境电子商务有限公司简介？ " target="_blank">深圳市前海海吉跨境电子商务有限公司简介？ </a></li> <li><em>10</em><a href="/jishuluodi/334375.html" title="沃尔玛（大连）商业零售有限公司简介？ " target="_blank">沃尔玛（大连）商业零售有限公司简介？ </a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/jishuluodi/331764.html" title="互联网创业简介？ " target="_blank">互联网创业简介？ </a></li> <li><em>2</em><a href="/jishuluodi/331273.html" title="西安赛腾实业有限公司简介？ " target="_blank">西安赛腾实业有限公司简介？ </a></li> <li><em>3</em><a href="/jishuluodi/329266.html" title="跨境电商简介？ " target="_blank">跨境电商简介？ </a></li> <li><em>4</em><a href="/jishuluodi/327453.html" title="816核工程简介？ " target="_blank">816核工程简介？ </a></li> <li><em>5</em><a href="/jishuluodi/325860.html" title="618核工程简介？ " target="_blank">618核工程简介？ </a></li> <li><em>6</em><a href="/jishuluodi/323674.html" title="宠妃1、2剧情简介？ " target="_blank">宠妃1、2剧情简介？ </a></li> <li><em>7</em><a href="/jishuluodi/321716.html" title="京东618大促简介" target="_blank">京东618大促简介</a></li> <li><em>8</em><a href="/jishuluodi/320859.html" title="跨境电商亚马逊简介？ " target="_blank">跨境电商亚马逊简介？ </a></li> <li><em>9</em><a href="/jishuluodi/319838.html" title="二十四节气简介" target="_blank">二十四节气简介</a></li> <li><em>10</em><a href="/jishuluodi/317837.html" title="山东新派微商电子商务有限公司简介？ " target="_blank">山东新派微商电子商务有限公司简介？ </a></li> <li><em>11</em><a href="/jishuluodi/316055.html" title="振楚供应链有限公司简介？ " target="_blank">振楚供应链有限公司简介？ </a></li> <li><em>12</em><a href="/jishuluodi/315942.html" title="重庆816核基地简介？ " target="_blank">重庆816核基地简介？ </a></li> <li><em>13</em><a href="/jishuluodi/315353.html" title="山东比普电子商务有限公司？ " target="_blank">山东比普电子商务有限公司？ </a></li> <li><em>14</em><a href="/jishuluodi/313260.html" title="重庆816工程简介？ " target="_blank">重庆816工程简介？ </a></li> <li><em>15</em><a href="/jishuluodi/312227.html" title="深圳市润海国际供应链有限公司简介？ " target="_blank">深圳市润海国际供应链有限公司简介？ </a></li> <li><em>16</em><a href="/shujuyingyong/288172.html" title="MongoDB的数据模型和存储结构简介" target="_blank">MongoDB的数据模型和存储结构简介</a></li> <li><em>17</em><a href="/shujuyingyong/286353.html" title="MongoDB的数据模型和存储方式简介" target="_blank">MongoDB的数据模型和存储方式简介</a></li> <li><em>18</em><a href="/shujuyingyong/285995.html" title="Redis的数据结构简介：从字符串到模块" target="_blank">Redis的数据结构简介：从字符串到模块</a></li> <li><em>19</em><a href="/shujuyingyong/285155.html" title="Redis集群简介：原理、配置和使用" target="_blank">Redis集群简介：原理、配置和使用</a></li> <li><em>20</em><a href="/shujuyingyong/284837.html" title="Redis的内部结构和工作原理简介" target="_blank">Redis的内部结构和工作原理简介</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div>   </body> </html>