具体的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自定义标签的更多相关文章

  1. webAssmebly实现js数组排序 使用custom elements和Shadow DOM自定义组件

    直接上码了……………… .wat源码 (module (type $t0 (func (param i32 i32))) (type $t1 (func (result i32))) (type $t ...

  2. 究竟什么是Shadow DOM？

    shadow dom 是什么? 顾名思义,shadow dom直译的话就是影子dom,但我更愿把它理解为DOM中的DOM.因为他能够为Web组件中的 DOM和 CSS提供了封装,实际上是在浏览器渲染文 ...

  3. 纯CSS菜单样式，及其Shadow DOM，Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...

  4. Shadow DOM及自定义标签

    参考链接:点我 一.什么是Shadow DOM Shadow DOM,直接翻译的话就是 影子 DOM,可以理解为潜藏在 DOM 结构中并且我们无法直接控制操纵的 DOM 结构.类似于下面这种结构 Sh ...

  5. video视频标签自定义显示隐藏播放控件&Shadow DOM

    方法一:controlslist属性 controlslist="nodownload nofullscreen noremoteplayback" controlslist仅三种 ...

  6. window 属性：自定义元素（custom elements）

      概述 Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),而往常,开发者不得不写一大堆冗长.深层嵌套的标 ...

  7. 自定义元素（custom elements）

    记录下自定义html自定义元素的相关心得: 浏览器将自定义元素保留在 DOM 之中,但不会任何语义.除此之外,自定义元素与标准元素都一致 事实上,浏览器提供了一个HTMLUnknownElement, ...

  8. Web Components之Custom Elements

    什么是Web Component? Web Components 包含了多种不同的技术.你可以把Web Components当做是用一系列的Web技术创建的.可重用的用户界面组件的统称.Web Com ...

  9. JavaScript 是如何工作：Shadow DOM 的内部结构 + 如何编写独立的组件！

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 17 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

随机推荐

  1. Java内存模型(Java Memory Model，JMM)

    今天简单聊聊什么叫做 Java 内存模型,不是 JVM 内存结构哦. JMM 是一个语言级别的内存模型,处理器的硬件模型是硬件级别,Java中的内存模型是内存可见性的基本保证.从而为我们 volati ...

  2. C 语言实例 - 连接字符串

    C 语言实例 - 连接字符串 C 语言实例 C 语言实例 使用 strcat() 连接两个字符串. 实例 #include <stdio.h> int main() { ], s2[], ...

  3. Execution failed for task ':app:lintVitalRelease'.

    解决方法:在build.gradle文件的android部分添加如下代码: lintOptions { checkReleaseBuilds false abortOnError false} 最后成 ...

  4. IP服务-1-ARP和代理ARP

    代理ARP常被人忽视,因为现在基本不用了

  5. urllib库的基本使用

    urllib库的使用 官方文档地址:https://docs.python.org/3/library/urllib.html 什么是urllib Urllib是python内置的HTTP请求库包括以 ...

  6. springMVC-接收数据-参数绑定

    接收数据-参数绑定 #Method Arguments概观 Same in Spring WebFlux The table below shows supported controller meth ...

  7. oracle 数据库 存储过程

    destinct(去除重复行), to_char(转换自符串), to_date(日期格式函数), substr(截取自符串), lower(将字母转换为小写), upper(将字母转换为小写), t ...

  8. MDX之百分比

    MDX的几种百分比的计算方法 实际应用中,特别是一些分析报表,经常需要计算数据百分比.份额.平均值.累计占比等,在数据仓库飞速发展的今天,我们需要了解一些经常编写的MDX语句的写法,以满足工作中的需要 ...

  9. js 学习网站

    1.  Mozilla Developer Network(MDN) 这里你可以找到官方的完整的javascript参考,还有许多有用的指导,教程以及文章,从基本javascript使用到最佳实践以及 ...

  10. 单线程异步回调机制的缺陷与node的解决方案

    一.node单线程异步的缺陷: 单线程异步的优点自然不必多说,node之所以能够如此快的兴起,其单线程异步回调机制相比于传统同步执行编程语言的优势便是原因之一.然而,开发一个node程序,其缺陷也是不 ...