具体的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. [Xcode 实际操作]二、视图与手势-(6)给图像视图添加阴影效果

    目录:[Swift]Xcode实际操作 本文将演示给图像视图添加阴影效果 import UIKit class ViewController: UIViewController { override ...

  2. ajax请求过程

    1.什么是ajax AJAX=Asynchronous JavaScript and XML  =====>异步的javascript和xml AJAX是在不重新加载整个页面的情况下与服务器交换 ...

  3. 01 | VIM基础攻略

    启动 vim 后,vim 处于 normal 模式. Step One: "i" -> insert 模式, ESC -> normal 模式: "x&quo ...

  4. Windows下完全卸载node.js并安装node.js的多版本管理工具nvm-windows

    前言 由于高版本的node.js导致gulp执行build命令失败,我需要在Windows下卸载掉已有的node.js并安装一个多版本管理工具nvm-windows,方便切换不同版本的node.js. ...

  5. [JLOI2016]圆的异或并

    Description 在平面直角坐标系中给定N个圆.已知这些圆两两没有交点,即两圆的关系只存在相离和包含.求这些圆的异或面积并.异或面积并为:当一片区域在奇数个圆内则计算其面积,当一片区域在偶数个圆 ...

  6. 洛谷 P1954 [NOI2010]航空管制

    https://www.luogu.org/problemnew/show/P1954 拓扑排序, 注意到如果正着建图("a出现早于b"=>"a向b连边" ...

  7. 23 在java中使用groovy类

    1       在java中使用groovy类 1.1  直接调用groovy类 在java中调用Groovy类,需要增加Groovy运行时到java的classpath中. pom.xml < ...

  8. HDU 5974 A Simple Math Problem 数学题

    http://acm.hdu.edu.cn/showproblem.php?pid=5974 遇到数学题真的跪.. 题目要求 X + Y = a lcm(X, Y) = b 设c = gcd(x, y ...

  9. html原样输出html代码

    <xmp>********</xmp> 在网页上显示html代码标记<xmp></xmp>有时我们会将html代码显示在网页上,直接写会有问题, 如果我 ...

  10. mongodb 上限集合

    上限集合是固定大小的循环集合按照插入以支持高性能的创建,读取和删除操作.通过循环,这意味着,当分配给该集合中的固定大小要用尽时,它会开始删除集合中最旧的文件而不提供任何明确的命令. 上限集合限制更新, ...