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

  • 相关阅读:
    struts2的@Result annotation 如何添加params,并且在页面取值
    spring @Entity @Table
    @Results( 中 params 怎么用
    Java三种技术架构
    python 内存管理
    wxpyhon 鼠标事件例子
    常用wxPython事件描述
    wxpython 拖动界面时进入假死状态(未响应)解决方法
    python 的一些高级编程技巧
    python 访问器@property的使用方法
  • 原文地址:https://www.cnblogs.com/y-y-y-y/p/10265908.html
Copyright © 2011-2022 走看看