具体的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的新增标签就是用这个技术实现的，特此分享，大佬略过！

 

版权声明：本文为y-y-y-y原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/y-y-y-y/p/10265908.html