Web Components 真正的浏览器组件
最后更新于：2020-09-04 22:22:46 | 91 次浏览
1. 简单的页面结构 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="main.js"></script>
</head>
<body>
<my-img></my-img>
<my-img></my-img>
<my-img></my-img>
<my-img></my-img>
<my-img></my-img>
</body>
</html>
2. 简单的自定义浏览器组件 Web Components 感觉一下它的魅力 main.js
class myImg extends HTMLElement {
constructor() {
super();
// 创建一个影子根节点
const shadow = this.attachShadow({
mode: 'open'
});
// 创建一个DIV
const wrapper = document.createElement('div');
wrapper.setAttribute('class', 'wrapper');
// 创建一个span
const span = document.createElement('span');
span.innerText = 'hello world';
// 创建一个图片
let imgUrl = 'https://img.hnquxing.com/information_flow/2020-08-17%2F983269d64b91cc6f348873eef144f71c.jpg';
const img = document.createElement('img');
img.src = imgUrl;
const style = document.createElement('style');
style.textContent = `
.wrapper {
position: relative;
}
span{
display:block;
position: absolute;
left:0;
top:0;
color:#fff;
background: rgba(0, 0, 0, 0.5);
}
img {
width: 12rem;
opacity: 0.5;
transition: all 600ms;
}
img:hover + span{
background: rgba(0, 0, 0, 1);
}
img:hover {
opacity: 1;
}
`;
wrapper.appendChild(img);
wrapper.appendChild(span)
shadow.appendChild(style);
shadow.appendChild(wrapper);
}
}
// 自定义的元素名
customElements.define('my-img', myImg);
浏览效果：WebComponents