码迷,mamicode.com
首页 > 其他好文 > 详细

使用custom elements和Shadow DOM自定义标签

时间:2019-01-14 15:09:26      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:div   xtend   ini   custom   自己   har   自定义标签   一个   自己实现   

具体的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自定义标签

标签:div   xtend   ini   custom   自己   har   自定义标签   一个   自己实现   

原文地址:https://www.cnblogs.com/y-y-y-y/p/10265908.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!