具体的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. XHTML学习笔记 Part2：核心元素

    1. <html>元素 <html xmlns="http://www.w3.org/1999/xhtml"> 仅有两个元素是<html>的直接 ...

  2. Android近场通信---NFC基础（四）（转）

    转自http://blog.csdn.net/think_soft/article/details/8184539 从Intent中获取信息 如果因为NFC的Intent而启动一个Activity,那 ...

  3. TYVJ1424占卜DIY

    Description lyd学会了使用扑克DIY占卜.方法如下:一副去掉大小王的扑克共52张,打乱后均分为13堆,编号1~13,每堆4张,其中第13堆称作“生命牌”,也就是说你有4条命.这里边,4张 ...

  4. python 基础(十二) 图片简单处理

    pillow 图片处理模块 安装 pip install pillow  pip是安装第三方模块的工具 缩放图片实例 from PIL import Image path = r'C:\Users\x ...

  5. bzoj 4695: 最假女选手 && Gorgeous Sequence HDU - 5306 && (bzoj5312 冒险 || 小B的序列) && bzoj4355: Play with sequence

    算导: 核算法 给每种操作一个摊还代价(是手工定义的),给数据结构中某些东西一个“信用”值(不是手动定义的,是被动产生的),摊还代价等于实际代价+信用变化量. 当实际代价小于摊还代价时,增加等于差额的 ...

  6. js操作表格

    js 操作table: insertRow(),deleteRow(),insertCell(),deleteCell()方法 表格有几行: var trCnt = table.rows.length ...

  7. python_18(Django基础)

    第1章 web框架的本质 1.1 socket 1.2 空格后面是主体内容 1.3 HTTP协议 1.3.1 响应流程 1.4 HTTP请求方法 1.5 HTTP工作原理 1.6 URL 1.7 HT ...

  8. [转]如何降低SQL Server 内存使用率

    我的数据库服务器内存为8G,现在资源管理器显示内存用到5G,可以肯定是sql server数据库吃内存原因. MSSQL占用了太多的内存,而且还不断的增长:或者说已经设置了使用内存,可是它没有用到那么 ...

  9. HashMap之put方法流程解读

    说明:本文中所谈论的HashMap基于JDK 1.8版本源码进行分析和说明. HashMap的put方法算是HashMap中比较核心的功能了,复杂程度高但是算法巧妙,同时在上一版本的基础之上优化了存储 ...

  10. kafka基础五

    Kafka与Zookeeper Zookeeper存储了什么 kafka架构中角色: 1.producer: 消息生产者,发布消息到 kafka 集群的终端或服务. 2.broker: kafka 集 ...