使用custom elements和Shadow DOM自定义标签
具体的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自定义标签的更多相关文章
- webAssmebly实现js数组排序 使用custom elements和Shadow DOM自定义组件
直接上码了……………… .wat源码 (module (type $t0 (func (param i32 i32))) (type $t1 (func (result i32))) (type $t ...
- 究竟什么是Shadow DOM？
shadow dom 是什么? 顾名思义,shadow dom直译的话就是影子dom,但我更愿把它理解为DOM中的DOM.因为他能够为Web组件中的 DOM和 CSS提供了封装,实际上是在浏览器渲染文 ...
- 纯CSS菜单样式，及其Shadow DOM，Json接口 实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...
- Shadow DOM及自定义标签
参考链接:点我 一.什么是Shadow DOM Shadow DOM,直接翻译的话就是 影子 DOM,可以理解为潜藏在 DOM 结构中并且我们无法直接控制操纵的 DOM 结构.类似于下面这种结构 Sh ...
- video视频标签自定义显示隐藏播放控件&Shadow DOM
方法一:controlslist属性 controlslist="nodownload nofullscreen noremoteplayback" controlslist仅三种 ...
- window 属性：自定义元素（custom elements）
概述 Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),而往常,开发者不得不写一大堆冗长.深层嵌套的标 ...
- 自定义元素（custom elements）
记录下自定义html自定义元素的相关心得: 浏览器将自定义元素保留在 DOM 之中,但不会任何语义.除此之外,自定义元素与标准元素都一致 事实上,浏览器提供了一个HTMLUnknownElement, ...
- Web Components之Custom Elements
什么是Web Component? Web Components 包含了多种不同的技术.你可以把Web Components当做是用一系列的Web技术创建的.可重用的用户界面组件的统称.Web Com ...
- JavaScript 是如何工作：Shadow DOM 的内部结构 + 如何编写独立的组件！
这是专门探索 JavaScript 及其所构建的组件的系列文章的第 17 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...
随机推荐
- 蓝桥杯T42(八数码问题)
题目链接:http://lx.lanqiao.cn/problem.page?gpid=T42 题意:中文题诶- 思路:bfs 将没种九宫格的状态看作一个状态节点,那么只需求起始节点到目标节点的最短路 ...
- bzoj 3653: 谈笑风生【dfs序+主席树】
考虑b的两种情况,一种是p的祖先,这种点有min(k,de[p]-1)个,然后每个这种b都有si[p]-1个c点可选: 另一种是p的子孙,要求是在p的子树内且deep在de[p]+1~de[p]+k之 ...
- IDEA安装actiBPM插件，亲测成功！避免直接在线安装或下载jar包硬盘都会报错问题！
在安装actiBPM之前先对IEDA进行如下设置: 开始安装网上的教程直接IDEA安装actiBPM,能安装成功,但无法打开新建bpmn文件.多次重新安装重启还是不行,苦苦弄了几个小时,最后才找到下面 ...
- AFN的使用
http网络库是集XML解析,Json解析,网络图片下载,plist解析,数据流请求操作,上传,下载,缓存等网络众多功能于一身的强大的类库.最新版本支持session,xctool单元测试.网络获取数 ...
- Tomcat 连接池调优
性能较好的Tomcat 配置文件内容 <Context> <Resource name="jdbc/pgsql" type="javax.sql.Dat ...
- 【NOI广东省选模拟赛】割
[问题描述] 给出 n 个数 a1,a2,...,an, 询问有多少个三元组(i, j, k)满足以下两个条件:1. i < j < k: 2. ai*aj*ak 是 p 的倍数. [输入 ...
- 51Nod 1099 任务执行顺序 (贪心)
#include <iostream> #include <algorithm> using namespace std; +; struct node{ int r, q; ...
- 怎么快速对DB里的所有email进行校验
问题 由于业务上的需求,重新改写了校验email的正则表达式,同时DB里又迁移了其他数据库的数据,现在需要重新对DB里的所有email再校验一次,以排除掉不合法的email. DB里的数据很多,手动去 ...
- 洛谷 P3462 [POI2007]ODW-Weights
题面: https://www.luogu.org/problemnew/show/P3462 https://www.lydsy.com/JudgeOnline/problem.php?id=111 ...
- c#操作ecxel的一些资源(downmoon搜集)
c#操作ecxel的一些资源(downmoon搜集) 工作需要,邀月收集了几个操作excel的资源. 1.如何:使用 COM Interop 创建 Excel 电子表格(C# 编程指南)http:/ ...