当前位置: 首页 > 科技观察

WebComponents系列实现MyCard的基本布局

时间:2023-03-14 15:41:40 科技观察

前言我们已经学习了一些关于WebComponents的基础理论知识。我们学习到的概念有:CustomElementsShadowDOMTemplatesSlots以及与这些概念相关的子知识点。理论知识基本够了。今后,我们要把理论应用到实践中,让理论为实践服务。今天我们就利用WebComponents的相关知识来实现??MyCard的制作。让我们使用我们都拥有的身份证作为原型的参考。最终的基本布局效果如下:UseTemplateslayout这里我们先使用HTML模板搭建布局,代码如下:姓名

编程序三明
性别民族出生20221212</div>地址xx区xx街道xx社区xxxx市xx省xx单位xx建筑xx公民号码12345678901234567X创建自定义元素使用我们前面学习的方法,创建一个基本的自定义元素my-card,在自定义组件IntroduceTemplates布局中,代码如下:classMyCardextendsHTMLElement{constructor(){super();this.shadow=this.attachShadow({mode:"open"});让tempEle=document.getElementById("card_layout");这个.shadow.appendChild(tempEle.content);}}customElements.define("my-card",MyCard);使用自定义元素在HTMLbody中引入my-card标签:总结最终效果如文章开头所示。在这篇文章中,我们只是使用CustomElements和Templates来实现基本的布局和样式,实用价值基本为零。后续会加入Slots,让自定义元素实现可复用的效果。~