具体的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. Educational Codeforces Round 20 C(math)

    題目鏈接: http://codeforces.com/problemset/problem/803/C 題意: 給出兩個數n, k, 將n拆分成k個數的和,要求這k個數是嚴格遞增的,並且這k個數的g ...

  2. hoj2798 Globulous Gumdrops

    Globulous Gumdrops My Tags   (Edit)   Source : 2008 Stanford Programming Contest   Time limit : 1 se ...

  3. Codevs 3409 搬运礼物

    3409 搬运礼物 CodeVS原创  时间限制: 1 s  空间限制: 64000 KB  题目等级 : 青铜 Bronze 题解       题目描述 Description 小浣熊松松特别喜欢交 ...

  4. （转） Git

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

  5. 字符串匹配，KMP算法

    KMP的详解见:https://segmentfault.com/a/1190000008575379 主要难点在于Next数组的理解,KMP是不需要回溯的匹配算法. #include<iost ...

  6. [coci2015-2016 coii] torrent【树形dp 二分】

    传送门:http://www.hsin.hr/coci/archive/2015_2016/ 进去之后点最下面那个. 这道题没有想出来,可惜了,其实不难的. 题目是两个“源”的,我们先考虑单源的问题. ...

  7. 问题: 查看某个文件的修改记录| git log 高级用法

    参考文章: git查看某个文件的修改历史 5.3 Git log 高级用法 基本步骤 git log --pretty=oneline [文件名] git show [节点] git log 两周高级 ...

  8. java jps

    jps:虚拟机进程状况工具: 命令格式: jps [options] [hostid] hostid 为RMI注册表中注册的主机名. 执行样例: options 参数: 选项  作用 -q  只输出L ...

  9. python flask学习(3)

    这次主要学习web表单.学了下,很像是Django的form表单验证.不过有许多的不同.可以说是功能更加碎块化.Django的验证方式是很固定和严谨的,风格完全不同. 尽管Flask的请求对象提供的对 ...

  10. 学习typescript(一)

    环境 必装软件 node,推荐 node 8.0 npm,推荐 npm 5.0 git, 最新版 vscode, 编绎器 必装包 tsc: npm install -g typescript typi ...