戴尔笔记本后背插槽详解,主板插槽讲解视频
终极管理员 知识笔记 126阅读
前言插槽实际上也属于组件通信的一种方式但是由于其强大的api和实用性我将其单独拆开来介绍。定义Slot插槽是Web Components中一个重要的特性它允许在组件内部定义占位符以便父组件可以向其中插入内容。换句话说就是将子组件或者标签传入父组件中最终达到在父组件外部实现子组件的效果基本用法slot属于Shadow DOM的一部分在原生html中并不支持插槽的写法所以我们必须将标签放在Shadow DOM中。插槽标签的写法插槽名称标签狭槽属性值/插槽需要传入的标签必须在对应的自定义标签中定义我的自定义元素差异插槽标签狭槽属性值标签/div/我的自定义元素完整示例参考下面的代码!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentie edge meta name viewport content width device-width，initial-scale 1.0 titles dodom/title/head body my-custom-element header header/header main slot content span content/span/main footer slot slot custom-element div id slots slot slot slot slot slot name slot header/slot name slot script const elem name my-custom const ele document。询问这个。影子根。appendchild(插槽)//插槽必须在阴影世界中} }自定义元素。定义(元素名，我的客户元素)/脚本/正文/html具名插槽具名插槽实际上就是上面的用法在自定义标签中使用div slot标签slot属性值标签/div以及在影子DOM中使用slot name标签slot属性值/slot的形式达到效果DOM的结构如下匿名插槽匿名插槽又叫默认插槽当有slot标签不设置name属性并且在自定义标签中存在未设置slot属性的其他标签即具名插槽的name属性以及slot属性均未设置此时第一个slot标签就会承载自定义标签中的全部匿名标签参考下
面的代码
<!DOCTYPE html><html langen><head> <meta charsetUTF-8> <meta http-equivX-UA-Compatible contentIEedge> <meta nameviewport contentwidthdevice-width, initial-scale1.0> <title>ShadowDOM</title></head><body> <my-custom-element> <header>header</header> <main> <span>content</span> </main> <footer>footer</footer> </my-custom-element> <div idslots> <!-- my-custom-element中的匿名标签都会放在第一个slot标签中 --> <slot></slot> <slot></slot> <slot></slot> </div> <script> const elemName my-custom-element const 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 langen><head> <meta charsetUTF-8> <meta http-equivX-UA-Compatible contentIEedge> <meta nameviewport contentwidthdevice-width, initial-scale1.0> <title>ShadowDOM</title></head><body> <button>显示后备插槽</button> <my-custom-element> <div idcontent slotcontent>具名插槽</div> </my-custom-element> <div idslots> <slot namecontent> <div stylecolor: lightcoral;>后备插槽</div> </slot> </div> <script src./main.js></script> <script> const content document.querySelector(#content) document.querySelector(button).addEventListener(click, () > { content.remove()// 当自定义标签my-custom-element中没有标签时则显示后备插槽标签 }) </script></body></html>
当我们将自定义标签中对应的插槽删掉时插槽元素就会显示后备插槽标签
插槽更新当我们插入修改移除插槽时会触发slotchange事件钩子类似于用于监听DOM更新的MutationObserver来看看下面的代码
<!DOCTYPE html><html langen><head> <meta charsetUTF-8> <meta http-equivX-UA-Compatible contentIEedge> <meta nameviewport contentwidthdevice-width, initial-scale1.0> <title>ShadowDOM</title></head><body> <my-custom-element-change> <div idcontent slotcontent>插槽</div> <div idcontent2 slotcontent2>插槽2</div> </my-custom-element-change> <div idslots> <slot namecontent></slot> </div> <script src./main.js></script> <script> const slot_box <div idbox1>slot</div> const slot_content slots?.querySelector([namecontent]) slot_content.addEventListener(slotchange, console.log); customElements.define(my-custom-element-change, class extends MyCustomElement { });// 初始化触发slotchange setTimeout(() > slot_content.name content2, 1000)// 替换slot绑定的元素触发slotchange setTimeout(() > 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 langen><head> <meta charsetUTF-8> <meta http-equivX-UA-Compatible contentIEedge> <meta nameviewport contentwidthdevice-width, initial-scale1.0> <title>ShadowDOM</title></head><body> <my-custom-element> text1 <header slotheader>header</header> text2 <main slotcontent> content <span>content1</span> <span>content2</span> <span> <div> <span>content3</span> </div> </span> </main> <footer slotfooter>footer</footer> </my-custom-element> <div idslots> <slot nameheader>header</slot> <slot namecontent>content</slot> <slot namefooter>footer</slot> </div> <script src./main.js></script> <script> const 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 插槽组成