当前位置: 首页 > Web前端 > HTML

WebComponents系列(10)——实现MyCard的基本布局

时间:2023-03-29 13:11:28 HTML

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

编程序三明
性别民族出生202212</div>月份12地址房间xx,xx,xx,xx,xx,xx,xx,xx,xx,xx省xx区xx省公民身份号码12345678901234567X使用我们的创建自定义元素之前学过的方法是创建一个基本的自定义元素my-card,在自定义组件中引入Templates布局。代码如下:classMyCardextendsHTMLElement{constructor(){super();this.shadow=this.attachShadow({mode:"open"});让tempEle=document.getElementById("card_layout");this.shadow.appendChild(tempEle.content);}}customElements.define("my-card",MyCard);使用custom元素在HTMLbody中引入my-card标签:总结了最终效果如文章开头所示在这篇文章中,我们只是使用CustomElements和Templates来实现基本的布局和样式,实用价值基本为零。后续会加入Slots,让自定义元素实现可复用的效果。~~本文到此结束,感谢阅读!~学习有趣的知识,认识有趣的朋友,塑造有趣的灵魂!大家好,我是〖编程三昧〗的作者王隐,我的公众号是《编程三昧》,欢迎关注,希望大家多多指教!