Web Components 系列（十一）—— 实现 MyCard 的可复用
时间：2023-03-28 13:08:06
HTML
WebComponents系列（十一）——实现MyCardSex的复用性基本为零。今天，我们使用具名的Slots发生在Templates中，然后在自定义元素中给Slots传值，以提高自定义元素的灵活性。传值分析是因为每个人的信息不一样，对应Templates，即className为.info-content的所有div的内容都是可变的。所有变量值汇总为：userNamegendernationbirthYearbirthYearbirthMonthbirthDayaddresscardNO也就是说对于每一个Card，自定义组件中都需要传入以上属性值。使用HTML标签自定义属性给自定义组件，除了Slots，还可以使用HTML标签自定义属性。第一步：我们在Templates内部的变量item父标签中添加一个id，例如：ProgrammingSamadhi
第二步：在自定义组件内部获取自己的用户定义的属性：classMyCardextendsHTMLElement{constructor(){super();this.shadow=this.attachShadow({mode:"open"});让tempEle=document.getElementById("card_layout");this.shadow.appendChild(tempEle.content);//获取并填写名称letuserName=this.getAttribute("userName")||“编程”；this.shadow.querySelector("#user_name").textContent=userName;//其余变量项的获取和设置过程相同}}第三步：在自定义元素的标签中添加相应的自定义属性：
通过以上步骤，也可以达到自定义组件传值的效果，从而达到组件复用的目的。使用NamedSlots传值虽然上面通过HTML标签的自定义属性达到了传值的目的，但是JS部分的代码看起来不是很漂亮。接下来，我们将实现一个使用Slots传值的版本。第1步：将命名槽添加到模板作为占位符。姓氏 