WebComponents系列之实现MyCard的基本布局

前言

Custom Elements
Shadow DOM
Templates
Slots

以及和这些概念相关的子知识点。

创新互联公司专业为企业提供成县网站建设、成县做网站、成县网站设计、成县网站制作等企业网站建设、网页设计与制作、成县企业网站模板建站服务，十载成县做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

理论知识基本上够用了，从现在开始我们需要将理论运用到实践中，让理论为实践服务。今天，我们就使用 Web Components 的相关知识来实现 MyCard 的制作，原型呢就以我们人人都有的身份证做参照吧。

最终实现的基本布局效果如下：

使用 Templates 布局

这里我们使用 HTML 模板将布局先构建出来，代码如下：

创建自定义元素

使用我们前面学习过的方法，创建一个基本的自定义元素 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 标签：

总结

最终实现的效果如文章开头所示。

在这篇文章中，我们只使用 Custom Elements 和 Templates 实现了基本布局和样式，实用价值基本为零。

在后续中，会加入 Slots 让自定义元素实现可复用的效果。

分享标题：WebComponents系列之实现MyCard的基本布局
文章地址：http://www.mswzjz.cn/qtweb/news32/64982.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：贝锐智能

贝锐智能技术为您推荐以下文章