Web Components 入门实例教程
web前端开发
共 4735字,需浏览 10分钟
· 2020-10-29
1、自定义元素
2、customElements.define()
class UserCard extends HTMLElement {
constructor() {
super();
}
}
window.customElements.define('user-card', UserCard);
3、自定义元素的内容
class UserCard extends HTMLElement {
constructor() {
super();
var image = document.createElement('img');
image.src = '';
image.classList.add('image');
var container = document.createElement('div');
container.classList.add('container');
var name = document.createElement('p');
name.classList.add('name');
name.innerText = 'User Name';
var email = document.createElement('p');
email.classList.add('email');
email.innerText = 'yourmail@some-email.com';
var button = document.createElement('button');
button.classList.add('button');
button.innerText = 'Follow';
container.append(name, email, button);
this.append(image, container);
}
}
4、标签
User Name
yourmail@some-email.com
class UserCard extends HTMLElement {
constructor() {
super();
var templateElem = document.getElementById('userCardTemplate');
var content = templateElem.content.cloneNode(true);
this.appendChild(content);
}
}
...
5、添加样式
user-card {
/* ... */
}
:host {
display: flex;
align-items: center;
width: 450px;
height: 180px;
background-color: #d4d4d4;
border: 1px solid #d5d5d5;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
border-radius: 3px;
overflow: hidden;
padding: 10px;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.image {
flex: 0 0 auto;
width: 160px;
height: 160px;
vertical-align: middle;
border-radius: 5px;
}
.container {
box-sizing: border-box;
padding: 20px;
height: 160px;
}
.container > .name {
font-size: 20px;
font-weight: 600;
line-height: 1;
margin: 0;
margin-bottom: 5px;
}
.container > .email {
font-size: 12px;
opacity: 0.75;
line-height: 1;
margin: 0;
margin-bottom: 15px;
}
.container > .button {
padding: 10px 25px;
font-size: 12px;
border-radius: 5px;
text-transform: uppercase;
}
User Name
yourmail@some-email.com
6、自定义元素的参数
image=""
name="User Name"
email="yourmail@some-email.com"
>
class UserCard extends HTMLElement {
constructor() {
super();
var templateElem = document.getElementById('userCardTemplate');
var content = templateElem.content.cloneNode(true);
content.querySelector('img').setAttribute('src', this.getAttribute('image'));
content.querySelector('.container>.name').innerText = this.getAttribute('name');
content.querySelector('.container>.email').innerText = this.getAttribute('email');
this.appendChild(content);
}
}
window.customElements.define('user-card', UserCard);
7、影子DOM
class UserCard extends HTMLElement {
constructor() {
super();
var shadow = this.attachShadow( { mode: 'closed' } );
var templateElem = document.getElementById('userCardTemplate');
var content = templateElem.content.cloneNode(true);
content.querySelector('img').setAttribute('src', this.getAttribute('image'));
content.querySelector('.container>.name').innerText = this.getAttribute('name');
content.querySelector('.container>.email').innerText = this.getAttribute('email');
shadow.appendChild(content);
}
}
window.customElements.define('user-card', UserCard);
8、组件的扩展
this.$button = shadow.querySelector('button');
this.$button.addEventListener('click', () => {
// do something
});
Web组件初学者教程 自定义元素v1:可重用的Web组件
九,参考链接
Web组件剖析,Uday Hiwarale
评论
CPU的入门知识
不管你玩硬件还是做软件,你的世界都少不了计算机最核心的 —— CPU。01CPU是什么?CPU与计算机的关系就相当于大脑和人的关系,它是一种小型的计算机芯片,通常嵌入在电脑的主板上。CPU的构建是通过在单个计算机芯片上放置数十亿个微型晶体管来实现。这些晶体管使它能够执行运行存储在系统内存中的程序所需
机器学习算法与Python实战
10
10个python爬虫入门实例
涉及主要知识点:web是如何交互的requests库的get、post函数的应用response对象的相关函数,属性python文件的打开,保存代码中给出了注释,并且可以直接运行哦如何安装requests库(安装好python的朋友可以直接参考,没...
马哥Linux运维
0
Gin 框架介绍与快速入门
目录Gin 框架介绍与快速入门1.gin.Engine2.gin.Context1.安装2.导入3.第一个Gin 应用1. 快速和轻量级2. 路由和中间件3. JSON解析4. 支持插件5. Gin相关文档一、Gin框架介绍二、基本使用三、应用举例四、Gin 入门核心...
马哥Linux运维
0
Java日志系统历史从入门到崩溃
前言最早开始撸码当时就遇到几次日志jar包冲突的问题,当时也是很烦躁,毕竟了解的也不多,什么那里4j,这里4j,还有什么桥接包,而且在我感觉他们的包名都还差不多!!我当时是比较懵逼的,上网搜了下,随便看到一...
浪尖聊大数据
0
Chrome开发者建议你这样调试web应用
❝本文来自 Chrome 团队的 Jecelyn Yeen (阮贝琪)在FEDAY分享,主题为:探讨网页调试的现况、Chrome DevTools 的最新进展以及一些实用的 DevTools 小工具。现代Web开发中,为了满足用户的需求和期望,提高开发效率和...
前端瓶子君
0
Java基础入门之Runtime类和文档注释
点击上方“Java进阶学习交流”,进行关注后台回复“Java”即可获赠Java学习资料今日鸡汤休对故人思故国,且将新火试新茶。诗酒趁年华。大家好,我是Java进阶者,今天小编带大家一起来学习Java技术基础!一、Runtime类1....
Java进阶学习交流
0
GitHub顶流"Web OS"——运行于浏览器的桌面操作系统、用户超100万、原生jQuery和JS编写
将Python客栈设为“星标⭐”第一时间收到最新资讯来源 | 经授权转自 OSC开源社区(ID:oschina2013)Puter 是近日在 GitHub 上最受欢迎的一款开源项目,正式开源还没到一周 ——star 数就已接近 7k。作者表示这...
Python客栈
0
Django 5.0来啦,能否成为最流行的Python Web框架!
?我的小册 40章+教程:(小白零基础用Python量化股票分析小册) ,目前已经300多人订阅| 转自:OSC开源社区(ID:oschina2013)Django 5.0 已正式发布。根据 JetBrains 公布的 2022 Python 开发者调查结果,Python...
菜鸟学Python
0