使用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 实际操作]九、实用进阶-(3)给代码方法添加宏注释
目录:[Swift]Xcode实际操作 本文将演示如何在方法列表中,对方法名称进行注释. 这样可以使程序,按功能分块,使方法清晰.易读并且方便定位. 在项目导航区,打开视图控制器的代码文件[ViewC ...
- 《http和https协议》
一.HTTP协议 1.官方概念: HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文 ...
- AtCoder Regular Contest 078 C
C - Splitting Pile Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement Snu ...
- eclipse导入mavn工程报Failure to transfer org.apache.maven.plugins:maven-resources-plugin:pom:2.6 的解决办法
详细报错: Failure to transfer org.apache.maven.plugins:maven-resources-plugin:pom:2.6 from http://10.74. ...
- git reflog查看所有操作记录
git reflog 可以查看所有分支的所有操作记录(包括(包括commit和reset的操作),包括已经被删除的commit记录,git log则不能察看已经删除了的commit记录 具体一个例子, ...
- IDEA自定义设置快捷键输出你想要的语句！
转载,侵权必删 用Eclipse时间长了, 就习惯之前的快捷键! 当然, IDEA不愧是Java开发的”利器”! 写起代码就是一个字 – “爽”! 建议大家可以去尝试一下! 当然, 在IDEA中输出S ...
- vue 引用其他组件
1.在components 目录下新建Test.vue 文件 <template> <div class="test"> <h1>{{ msg ...
- React-redux及异步获取数据20分钟快速入门
一, 写在前面 1. 前面我写过一个vuex10分钟入门 传送门 2. React-redux网上有好多文档,又臭又长,明明很简单的问题,硬是让新人更晕了~, 我写这个文章的目的是让新人在20分钟之内 ...
- jvm内存溢出的三种情况以及解决办法
1 前言相信有一定java开发经验的人或多或少都会遇到OutOfMemoryError的问题,这个问题曾困扰了我很长时间,随着解决各类问题经验的积累以及对问题根源的探索,终于有了一个比较深 ...
- js对象引用赋值后
a={f:1} b={} b.a=a console.log(b.a) a.b=2 console.log(b.a) a={f:1} b={} b.a=a console.log(b.a) a={b: ...