使用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 ...
随机推荐
- [Xcode 实际操作]九、实用进阶-(8)实现App的Setting设置：添加和读取程序的配置信息
目录:[Swift]Xcode实际操作 本文将演示如何实现添加和读取程序的配置信息. 在项目文件夹[DemoApp]上点击鼠标右键->[New File]创建一个设置束文件 ->[Sett ...
- 学习Mahout (四)
在Mahout 学习(三)中,我贴了example的代码,里面生成向量文件的代码: InputDriver.runJob(input, directoryContainingConvertedInpu ...
- assembly x86(nasm)画三角形等图形的实现
参考了一位大佬的博客 https://blog.csdn.net/qq_40298054/article/details/84496944传送门 https://blog.csdn.net/qq_40 ...
- mysql整理（个人）
注意:以下命令都是在Linux系统下执行的: 1.验证mysql是否安装成功: mysqladmin --version 2.连接mysql服务器: mysql -u root -p 之后输入密码 3 ...
- Linux | C代码的编写、运行和调试
1. 建立.c文件 在终端下输入:vi mytest.c [使用编辑器 vim] 键入键盘i键,使vi编辑器进入编辑模式 接下来在vi编译器中编写代码,如: #include <stdio.h ...
- TCP常用方法
//格式化为16进制输出指令 function fromateSendCode($code){ $codeArr = getCodeWithSpace($code); for($i=0; $i< ...
- UVA10305：Ordering Tasks（拓扑排序）
John has n tasks to do. Unfortunately, the tasks are not independent and the execution of one task i ...
- MyBatis中时间格式的映射问题
简单地说,就是Java的Date类可以直接映射到Mysql的TIMESTAMP或者是DATETIME(按道理应该是映射成DATE的) 具体的看这两篇博客吧: 1. MySql中TIMESTAMP和DA ...
- 115 Distinct Subsequences 不同子序列
给定一个字符串 S 和一个字符串 T,求 S 的不同的子序列中 T 出现的个数.一个字符串的一个子序列是指:通过删除一些(也可以不删除)字符且不干扰剩余字符相对位置所组成的新字符串.(譬如," ...
- Unix高级环境编程之fcntl函数
#include <fcntl.h> int fcntl(int fd, int cmd, ...) fcntl功能 复制一个现有的描述符 (cmd = F_DUPFD) ##### 返回 ...