Shadow DOM及自定义标签
2024-10-17 22:57:21
参考链接:点我
一、什么是Shadow DOM
Shadow DOM,直接翻译的话就是 影子 DOM
,可以理解为潜藏在 DOM 结构中并且我们无法直接控制操纵的 DOM 结构。类似于下面这种结构
Shadow DOM 可以在浏览器中生成一个独立于DOM树之外的 DOM结构
二、Shadow DOM的结构
1、Shadow host:相当于存放Shadow DOM的容器
2、Shadow root:Shadow DOM的根,它和它的后代元素,都将对用户隐藏,但是它们是实际存在的,在 chrome 中,我们可以通常审查元素去查看它们的具体 DOM 实现。
3、contents:Shadow DOM的具体内容
三、如何创建使用Shadow DOM
1、创建
function createShadowDOM(elem) {
// var root = elem.createShadowRoot() //已被attachShadow替换
var root = elem.attachShadow({mode:"open"})// mode为open时对外可以访问
root.appendChild(createComponent("costom-component"))// 自定义标签
}
2、使用
<div id="div">这里是不显示出来的,如果你看到了,说明浏览器不支持ShadowDOM</div>
createShadowDOM(document.querySelector("#div"))
3、获取Shadow DOM
document.querySelector('#div').shadowRoot
四、用途
1、在编写插件时,需要向DOM中插入新的DOM,但又怕样式或者DOM发生冲突,Shadow DOM的样式以及结构都是对外分开,不会溢出,外部的亦不会侵入
2、登其他自己去发现
五、优缺点
优点:
1、可封装复用
2、不会增加DOM的结构
3、样式独立
缺点:
1、兼容性差
2、不易调试或检查
七、自定义标签
自定义元素:点我
使用es6的class写法,继承 HTMLElement,使用connectedCallback添加方法,使用attributeChangedCallback做属性的改变
注:自定义标签的名称必须是包含一个破折号( - ),并且不能有大写字母
class CustomElement extends HTMLElement {
constructor() {
super()
this._name = 'Custom'
}
connectedCallback() {
this.addEventListener(
'click', e => alert(`Hello, ${this._name}!`)
);
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (attrName === 'name') {
if (newValue) {
this._name = newValue
} else {
this._name = 'Custom'
}
}
}
}
CustomElement.observedAttributes = ['name']
customElements.define('costom-component', CustomElement)
最新文章
- beanstalkd 消息队列
- for循环立即执行和不立即执行,js闭包
- easyui datebox 扩展清空按钮及日期判断
- 后盾网VIP美团网开发(基于HDPHP)(全套38课)
- [翻译][MVC 5 + EF 6] 4:弹性连接和命令拦截
- 由C到C++的学习 ----Essential C++
- [异常解决] Make nRF51 DFU Project Appear ";fatal error: uECC.h: No such file or directory";
- 秒味课堂Angular js笔记------过滤器
- Vi命令详解
- CentOS7 安装kubernetes
- /etc/fstab 文件解释
- struts-config.xml的配置
- golang从简单的即时聊天来看架构演变
- [转]HTML5 script 标签的 crossorigin 属性到底有什么用?
- tofixed方法 四舍五入
- Time travel HDU - 4418(高斯消元)
- SQLServer 2008R2主从部署实战
- 有关自动化构建gulp的搭建
- C# 利用反射完成计算器可扩展功能
- Linux不在显示器上方总是显示企鹅