使用custom elements和Shadow DOM自定义标签
Posted y-y-y-y
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用custom elements和Shadow DOM自定义标签相关的知识，希望对你有一定的参考价值。
具体的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的新增标签就是用这个技术实现的，特此分享，大佬略过！
以上是关于使用custom elements和Shadow DOM自定义标签的主要内容，如果未能解决你的问题，请参考以下文章
android中图型的阴影效果（shadow-effect-with-custom-shapes）