前言
后面针对 Web Components 学习了一些根本的理论知识，咱们理解到的概念有：
- Custom Elements
- Shadow DOM
- Templates
- Slots
以及和这些概念相干的子知识点。
理论知识基本上够用了，从当初开始咱们须要将实践使用到实际中，让实践为实际服务。明天，咱们就应用 Web Components 的相干常识来实现 MyCard 的制作，原型呢就以咱们人人都有的身份证做参照吧。
最终实现的根本布局成果如下：
应用 Templates 布局
这里咱们应用 HTML 模板将布局先构建进去，代码如下：
<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">编程三昧</div> </div> <div class="info-row"> <div class="info-column"> <div class="info-title">性别</div> <div class="info-content">男</div> </div> <div class="info-column"> <div class="info-title">民族</div> <div class="info-content">汉</div> </div> </div> <div class="info-row"> <div class="info-column"> <div class="info-title">出世</div> <div class="info-content">2022</div> </div> <div class="info-column"> <div class="info-title">年</div> <div class="info-content">12</div> </div> <div class="info-column"> <div class="info-title">月</div> <div class="info-content">12</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">xx省xx市xx区xx街道xx小区xx楼xx单元xx楼xx室</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">12345678901234567X</div> </div> </div> </div> </div></template>创立自定义元素
应用咱们后面学习过的办法，创立一个根本的自定义元素 my-card，在自定义组件中引入 Templates 布局，代码如下：
class MyCard extends HTMLElement { constructor () { super(); this.shadow = this.attachShadow({mode: "open"}); let tempEle = document.getElementById("card_layout"); this.shadow.appendChild(tempEle.content); }}customElements.define("my-card", MyCard);应用自定义元素
在 HTML 的 body 中引入 my-card 标签：
<my-card></my-card>总结
最终实现的成果如文章结尾所示。
在这篇文章中，咱们只应用 Custom Elements 和 Templates 实现了根本布局和款式，实用价值根本为零。
在后续中，会退出 Slots 让自定义元素实现可复用的成果。
~
~ 本文完，感激浏览！
~
学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！