做网站哪家服务器好,自助免费建站系统,沈阳网页设计方案,加工平台网站前言
插槽实际上也属于组件通信的一种方式#xff0c;但是由于其强大的api和实用性#xff0c;我将其单独拆开来介绍。
定义
Slot#xff08;插槽#xff09;是Web Components中一个重要的特性#xff0c;它允许在组件内部定义占位符#xff0c;以便父组件可以向其中插…前言
插槽实际上也属于组件通信的一种方式但是由于其强大的api和实用性我将其单独拆开来介绍。
定义
Slot插槽是Web Components中一个重要的特性它允许在组件内部定义占位符以便父组件可以向其中插入内容。换句话说就是将子组件或者标签传入父组件中最终达到在父组件外部实现子组件的效果
基本用法
slot属于Shadow DOM的一部分在原生html中并不支持插槽的写法所以我们必须将标签放在Shadow DOM中。
插槽标签的写法
slot name标签slot属性值/slot
需要传入的标签必须在对应的自定义标签中定义
my-custom-elementdiv slot标签slot属性值标签/div
/my-custom-element
完整示例参考下面的代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleShadowDOM/title
/headbodymy-custom-elementheader slotheaderheader/headermain slotcontentspancontent/span/mainfooter slotfooterfooter/footer/my-custom-elementdiv idslotsslot nameheader/slotslot namecontent/slotslot namefooter/slot/divscriptconst elemName my-custom-elementconst ele document.querySelector(elemName)const slots document.querySelector(#slots)class MyCustomElement extends HTMLElement {constructor() {super()this.attachShadow({ mode: open });this.shadowRoot.appendChild(slots)// 插槽必须在shadowDOM中}}customElements.define(elemName, MyCustomElement)/script
/body/html
具名插槽
具名插槽实际上就是上面的用法在自定义标签中使用div slot标签slot属性值标签/div以及在影子DOM中使用slot name标签slot属性值/slot的形式达到效果
DOM的结构如下 匿名插槽
匿名插槽又叫默认插槽当有slot标签不设置name属性并且在自定义标签中存在未设置slot属性的其他标签即具名插槽的name属性以及slot属性均未设置此时第一个slot标签就会承载自定义标签中的全部匿名标签参考下面的代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleShadowDOM/title
/headbodymy-custom-elementheaderheader/headermainspancontent/span/mainfooterfooter/footer/my-custom-elementdiv idslots!-- my-custom-element中的匿名标签都会放在第一个slot标签中 --slot/slotslot/slotslot/slot/divscriptconst elemName my-custom-elementconst ele document.querySelector(elemName)const slots document.querySelector(#slots)class MyCustomElement extends HTMLElement {constructor() {super()this.attachShadow({ mode: open });this.shadowRoot.appendChild(slots)}}customElements.define(elemName, MyCustomElement)/script
/body/html
在页面中的DOM结构如下三个标签都被放在了第一个slot 后备插槽
当我们使用图片标签图片却加载失败时往往会给图片增加一个alt文字提醒或使用默认图片。类似的插槽也有这种效果。当我们使用具名插槽并且找不到对应的标签时可以在slot标签中增加标签以便默认状态展示比如
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleShadowDOM/title
/headbodybutton显示后备插槽/buttonmy-custom-elementdiv idcontent slotcontent具名插槽/div/my-custom-elementdiv idslotsslot namecontentdiv stylecolor: lightcoral;后备插槽/div/slot/divscript src./main.js/scriptscriptconst content document.querySelector(#content)document.querySelector(button).addEventListener(click, () {content.remove()// 当自定义标签my-custom-element中没有标签时则显示后备插槽标签})/script
/body/html 当我们将自定义标签中对应的插槽删掉时插槽元素就会显示后备插槽标签
插槽更新
当我们插入修改移除插槽时会触发slotchange事件钩子类似于用于监听DOM更新的MutationObserver来看看下面的代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleShadowDOM/title
/headbodymy-custom-element-changediv idcontent slotcontent插槽/divdiv idcontent2 slotcontent2插槽2/div/my-custom-element-changediv idslotsslot namecontent/slot/divscript src./main.js/scriptscriptconst slot_box div idbox1slot/divconst slot_content slots?.querySelector([namecontent])slot_content.addEventListener(slotchange, console.log);customElements.define(my-custom-element-change, class extends MyCustomElement { });// 初始化触发slotchangesetTimeout(() slot_content.name content2, 1000)// 替换slot绑定的元素触发slotchangesetTimeout(() slot_content.remove(), 2000)// 删除插槽触发slotchange/script
/body/html
上面的代码主要是一个简单的slotchange回调演示创建自定义元素后slot会初始化触发slotchange1秒后修改slot内容触发slotchange最后2秒后删除slot再次触发回调
插槽api
assignedSlot它是标签的一个属性通常在slot的目标标签使用用于获取目标标签绑定的slot标签assignedNodesassignedNodes是slot上的函数使用该方法可以返回所有分配的节点包括文本节点和元素节点assignedElementsassignedElements是slot上的函数它会返回分配的元素节点
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleShadowDOM/title
/headbodymy-custom-elementtext1header slotheaderheader/headertext2main slotcontentcontentspancontent1/spanspancontent2/spanspandivspancontent3/span/div/span/mainfooter slotfooterfooter/footer/my-custom-elementdiv idslotsslot nameheaderheader/slotslot namecontentcontent/slotslot namefooterfooter/slot/divscript src./main.js/scriptscriptconst elems document.querySelectorAll([slot])const slotElems slots.querySelectorAll([name])elems.forEach(it console.log(it.assignedSlot))slotElems.forEach(slot {const nodes slot.assignedNodes();const elements slot.assignedElements();nodes.forEach(console.log);elements.forEach(console.log);})/script
/body/html
总结
插槽是Web Components中的一个重要特性用于在自定义组件内部定义占位符使得父组件可以向其中插入内容从而实现了组件之间的高度灵活的通信和组合。通过合理使用具名插槽、匿名插槽以及后备插槽开发者可以实现高度定制化的组件组合。同时插槽的事件和 API 提供了对插槽内容的监测和操作为构建更加动态的用户界面增添了便利性。
以上就是文章全部内容了如果觉得文章不错的话还望三连支持一下感谢
相关代码
myCode: 基于js的一些小案例或者项目 - Gitee.com
参考文章
Shadow DOM 插槽组成
