zoukankan      html  css  js  c++  java
  • 使用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的新增标签就是用这个技术实现的,特此分享,大佬略过!

  • 相关阅读:
    Numpy库
    使用Python的pandas-datareader包下载雅虎财经股价数据
    python引用库异常总结
    桌面常用快捷键
    第四章 数据的概括性度量
    第三章 数据的图表展示
    python连接MySql数据库
    如何利用scrapy新建爬虫项目
    幼儿教育
    PyMySQL和MySQLdb的区别
  • 原文地址:https://www.cnblogs.com/y-y-y-y/p/10265908.html
Copyright © 2011-2022 走看看