具体的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. uoj #210. 【UER #6】寻找罪犯【2-SAT】

    首先最直观的,列一排是罪犯一排不是罪犯,对于一个条件u说v(0是1否)f罪犯,如果u不是,那么vf罪犯:如果u是,枚举他说谎的一条wg罪犯,令w(g^1)罪犯连其他条的vf 但是这样有个电度数方,会炸 ...

  2. 【POJ - 3040】Allowance（贪心）

    Allowance 原文是English,这里就放Chinese了 Descriptions: 作为创纪录的牛奶生产的奖励,农场主约翰决定开始给Bessie奶牛一个小的每周津贴.FJ有一套硬币N种(1 ...

  3. PJzhang:百度网盘是如何泄露公司机密的？

    猫宁!!! 参考链接:https://mp.weixin.qq.com/s/PLELMu8cVleOLlwRAAYPVg 百度网盘在中国一家独大,百度超级会员具有很多特权,尤其是在下载速度上,是普通会 ...

  4. spring框架——依赖注入

    依赖注入:DI 又称控制反转:IoC 项目名字spring_DI 一.implement包中定义了两个接口Food和Person 1.接口Food package org.interfaces; pu ...

  5. 解决IIS中运行TopJUI左侧菜单不显示的问题

    TopJUI演示系统中,模拟数据保存在.json文件中,目前发现有部分用户的IIS容器默认情况下是不支持.json文件的请求的,因此需要配置一下,可参考下文配置解决: 一.IIS 6 1． MIME设 ...

  6. shell学习（7）- linux权限管理及修改权限命令chmod

    文件系统权限基本介绍 1.文件基本权限 总共10个字符,可以分为四组, 第一组,就一个字符-,代表是文件类型,是一个常规文件,还有其他的类型如下所示 d--目录 l--符号链接,软连接 c--字符专门 ...

  7. 关于maven+springmvc+mybits搭建的框架clean，build后错误：org.apache.ibatis.binding.BindingException的处理

    1.错误原型截图: 2.我对错误的处理轨迹: a.首先,可能是我的mapper.xml配置错了,但是经过查看发现mybits.xml配置如下: 我项目的目录结构如下: 初次判断mybits的配置没有问 ...

  8. python 全局变量 局部变量

    ##全局变量,局部变量#在函数内部可以调用全局变量,不能随意改变全局变量#若要在函数内部改变全局变量,需用关键字global #代码中全局变量都大写,局部变量都小写(非必须,一种规范) P = &qu ...

  9. Ionic之$scope 依赖注入报错

    在开发Ionic过程中,发现会报在 LoginController 中引用locals报错,具体报错问题: ionic.bundle.js:19526 Error: [$injector:unpr] ...

  10. Java之构造方法及this、super关键字

    有关构造方法的理解: 需要对对象的数据进行初始化,则创建一个构造方法,此方法名字和类名一样,但是没有返回值(类型和具体的值都没,但是可以写return;).构造方法是用来创建对象的,所以是不能被对象调 ...