具体的api我就不写 官网上面多 如果不知道这个的话也可以搜索一下 目前感觉这个还是相当好用的直接上码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用custom elements和Shadow DOM自定义标签</title>
</head>
<body>
<script>
//自定义html模板
let html = `
<div class="custom_box">
<style>
.custom_box{
--w:500px;
--h:500px;
--bg:red;
background: var(--bg);
overflow: hidden;
}
.btn{
background:var(--bg);
}
</style>
<button class="btn">点击我</button>
</div>
`;
//继承自HTMLElement
class Init extends HTMLElement{
constructor(){
super();
this.onclick = ()=>{
alert("我是一个按钮");
}
//调用影子dom 添加自定义html模板
let shadow = this.attachShadow({mode:'open'});
shadow.innerHTML = html;
}
}
//实例化
customElements.define('in-it',Init);
</script>
<!-- 使用自己实现的自定义标签 -->
<in-it></in-it>
</body>
</html>
在我个人看来这个是相当好用毕竟能自己定制dom能实现相当灵活的模块化编程，减少页面上dom的代码，而且使用shadow dom 能把你的样式封装隐藏起来，很多h5的新增标签就是用这个技术实现的，特此分享，大佬略过！