前言
在上一节中，应用 Templates 实现了 MyCard 的根本布局，并且在文章结尾我也说过，因为不可复用，其实用性根本为零。
明天咱们通过应用具名 Slots 在 Templates 中占位，而后再在自定义元素中给 Slots 传值，进步自定义元素的灵活性。
传值剖析
因为每一个人的各项信息都不尽相同，而对应到 Templates 中，就是所有 className 为 .info-content 的 div 中的内容都是可变的，所有可变值总结一下就是：
- userName
- gender
- nation
- birthYear
- birthMonth
- birthDay
- address
- cardNO
就是说，针对每一张 Card，以上这些属性值都须要在自定义组件中传递。
应用 HTML 标签自定义属性
要给自定义组件，除了 Slots，也能够借助 HTML 标签的自定义属性。
第一步：咱们给 Templates 外部的可变项父标签增加 id 标识，比方：
<div class="info-content" id="user_name">编程三昧</div>第二步：在自定义组件外部获取它自身的用户自定义属性：
class MyCard extends HTMLElement { constructor () { super(); this.shadow = this.attachShadow({mode: "open"}); let tempEle = document.getElementById("card_layout"); this.shadow.appendChild(tempEle.content); // 获取并填充姓名 let userName = this.getAttribute("userName") || "编程三昧"; this.shadow.querySelector("#user_name").textContent = userName; // 残余可变项的获取和设置是一样的流程 }}第三步：在自定义元素的标签上增加对应的自定义属性：
<my-card userName="隐逸王"></my-card>通过以上步骤，也是能够实现自定义组件传值的成果的，从而达到组件复用的目标。
应用具名 Slots 传值
尽管下面应用 HTML 标签的自定义属性达到了传值的目标，然而 JS 局部的代码看起来不太好看，上面咱们就用 Slots 传值的形式实现一版。
第一步：给 Templates 减少具名插槽进行占位。
<template id="card_layout"> <style> * { box-sizing: border-box; } :host { display: inline-block; width: 400px; height: 240px; border: 1px solid black; border-radius: 10px; box-shadow: -2px -2px 5px 0px #7a8489; } .container { display: flex; flex-direction: column; padding: 10px; height: 100%; } .card-body { flex: 1; display: flex; } .card-footer { padding: 10px 0; } .main-info { flex: 2; } .photo { flex: 1; display: flex; align-items: center; } .photo img { width: 100%; } .info-row { display: flex; padding-top: 15px; } .info-column { display: flex; align-items: center; } .info-title { padding: 0 10px; color: #0e5bd3; font-size: 12px; word-break: keep-all; } .info-content { letter-spacing: 2px; } </style> <div class="container"> <div class="card-body"> <div class="main-info"> <div class="info-row"> <div class="info-column"> <div class="info-title">姓名</div> </div> <div class="info-content"> <slot name="userName">隐逸王</slot> </div> </div> <div class="info-row"> <div class="info-column"> <div class="info-title">性别</div> <div class="info-content"> <slot name="gender">男</slot> </div> </div> <div class="info-column"> <div class="info-title">民族</div> <div class="info-content"> <slot name="nation">汉</slot> </div> </div> </div> <div class="info-row"> <div class="info-column"> <div class="info-title">出世</div> <div class="info-content"> <slot name="birthYear">2022</slot> </div> </div> <div class="info-column"> <div class="info-title">年</div> <div class="info-content"> <slot name="birthMonth">12</slot> </div> </div> <div class="info-column"> <div class="info-title">月</div> <div class="info-content"> <slot name="birthDay"></slot> </div> </div> <div class="info-column"> <div class="info-title">日</div> </div> </div> <div class="info-row"> <div class="info-column"> <div class="info-title">住址</div> </div> <div class="info-content"> <slot name="address">xx省xx市xx区xx街道xx小区xx楼xx单元xx楼xx室</slot> </div> </div> </div> <div class="photo"> <img src="./static/photo.jpg"> </div> </div> <div class="card-footer"> <div class="info-row"> <div class="info-column"> <div class="info-title">公民身份号码</div> </div> <div class="info-content"> <slot name="cardNO">12345678901234567X</slot> </div> </div> </div> </div></template>第二步：在自定义元素标签内插入带有 slot=‘’ 属性的标签及内容。
<my-card> <span slot="userName">编程三昧</span> <span slot="gender">男</span> <span slot="nation">汉</span> <span slot="birthYear">2002</span> <span slot="birthMonth">2</span> <span slot="birthDay">2</span> <span slot="address">银河系太阳系地球村亚洲中国漂亮小区</span> <span slot="cardNO">134098567432129485-ZH</span></my-card>最终实现的成果如下：
实现一个网页显示多张 MyCard
如果想要同时展现多个卡片到同一页面，你应用下面代码的话会发现：只有第一个有内容，其余的都为空。这是因为第一个 MyCard 实例将 Templates 的内容都追加在了本人外部，其余的实例获取到的 tempEle.content 都为空节点。
想要解决这个问题，就须要在 MyCard 构造函数外部对 Templates 内容进行克隆，而不是间接应用：
class MyCard extends HTMLElement { constructor () { super(); this.shadow = this.attachShadow({mode: "open"}); let tempEle = document.getElementById("card_layout"); this.shadow.appendChild(document.importNode(tempEle.content,true)); }}customElements.define("my-card", MyCard);总结
本文应用了两种形式向自定义组件传值：
- HTML 标签的自定义属性传值
- 具名 Slots 传值
两种都能够应用，看状况及集体爱好而定吧。
另外，还有一个细节须要留神：appendChild() 办法会将传入的节点整个的挪动地位，传入的那个 Node 在 DOM 中的地位会发生变化，咱们个别在调用 appendChild() 时，传入的都是克隆节点。
~
~ 本文完，感激浏览！
~
学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！