Shadow DOM的理解
Shadow DOM的理解
Shadow DOM
是HTML
的一个规范,其允许在文档document
渲染时插入一颗DOM
元素子树,但是这棵子树不在主DOM
树中,Shadow DOM
如果按照英文翻译的话可以翻译为影子DOM
,是一种不属于主DOM
树的独立的结构。
描述
Web components
的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净、整洁,在这里Shadow DOM
接口是关键所在,它可以将一个隐藏的、独立的DOM
附加到一个元素上,Shadow DOM
标准允许你为你自己的元素custom element
维护一组Shadow DOM
。
Shadow DOM
允许将隐藏的DOM
树附加到常规的DOM
树中,它以shadow root
节点为起始根节点,在这个根节点的下方,可以是任意元素,和普通的DOM
元素一样,另外还有一些Shadow DOM
特有的术语。
Shadow host
: 一个常规DOM
节点,Shadow DOM
会被附加到这个节点上。Shadow tree
:Shadow DOM
内部的DOM
树。Shadow boundary
:Shadow DOM
结束的地方,也是常规DOM
开始的地方。Shadow root
:Shadow tree
的根节点。
我们可以使用同样的方式来操作Shadow DOM
,就和操作常规DOM
一样——例如添加子节点、设置属性,以及为节点添加自己的样式(例如通过element.style
属性),或者为整个Shadow DOM
添加样式(例如在<style>
元素内添加样式),不同的是Shadow DOM
内部的元素始终不会影响到它外部的元素(除了:focus-within
),这就为封装提供了便利。
此外不管从哪个方面来看Shadow DOM
都不是一个新事物,在过去的很长一段时间里,浏览器用它来封装一些元素的内部结构,以一个有着默认播放控制按钮的<video>
元素为例,我们所能看到的只是一个<video>
标签,实际上,在它的Shadow DOM
中,包含来一系列的按钮和其他控制器。再举一个例子我们都知道像React
或Vue
这样的都有组件的概念,我们常用的<input>
、<audio>
、<video>
等这些元素,其实它也是以组件的形式存在的,即HTML Web Component
这些都有自己的Shadow DOM
,这些组件内部是由自身的一些HTML
标签组成的。
现代浏览器Firefox
、Chrome
、Opera
和Safari
等默认支持Shadow DOM
,基于Chromium
的新Edge
也支持Shadow DOM
,而旧Edge
未能撑到支持此特性,至于IE
浏览器嘛...
,兼容性方面可以查阅此处https://caniuse.com/?search=Shadow%20DOM
。
示例
<!DOCTYPE html>
<html><head><title>Shadow DOM</title><style>.text{color: blue; /* 设置字体颜色 */ /* 可以看出在外部定义的样式无法影响到影子内部元素样式 */}</style>
</head><body><div id="app"><div class="shadow-cls"></div></div>
</body><script type="text/javascript">(function(doc, win){var shadowHost = doc.querySelector(".shadow-cls"); // 获取影子宿主shadow hostvar shadowRoot = shadowHost.attachShadow({mode: "open"}); // 创建(附加)影子shadow root // open 表示可以通过页面内的 JavaScript 方法来获取 Shadow DOMvar style = doc.createElement("style"); // 创建style元素style.textContent = `.text{font-style: italic;}`; // 影子内部样式const template = `<div><div class="text">Text</div></div>`; // 模板 // 另外可以尝试 <template> 以及 <script text/template>const container = doc.createElement("div"); // 创建容器container.innerHTML = template; // 加入容器shadowRoot.append(style, container); // 加入影子})(document, window);
</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://segmentfault.com/a/1190000017970486
https://www.cnblogs.com/tugenhua0707/p/10545179.html
https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM
Shadow DOM的理解相关推荐
- 理解Shadow DOM
1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...
- Shadow DOM及自定义标签
参考链接:点我 一.什么是Shadow DOM Shadow DOM,直接翻译的话就是 影子 DOM,可以理解为潜藏在 DOM 结构中并且我们无法直接控制操纵的 DOM 结构.类似于下面这种结构 Sh ...
- shadow dom一个最简单的例子
本文资料来自stackoverflow:https://stackoverflow.com/questions/34119639/what-is-shadow-root/34119775#341197 ...
- html页面和Chrome开发者工具elements界面不一致的一个可能原因:没有在Chrome开发者工具里打开对Shadow DOM显示的支持
一个例子: 虽然UI上input field里显示的是Jerry,但是Chrome开发者工具里面并没有显示出来. 注意上图最下方,显示的input后面有#shadow-root.div. 打开sett ...
- [译] 用 Shadow DOM v1 和 Custom Elements v1 实现一个原生 Web Component
原文地址:Make a Native Web Component with Custom Elements v1 and Shadow DOM v1 原文作者:Pearl Latteier 译文出自: ...
- [html] 举例说明Shadow DOM的应用场景有哪些?
[html] 举例说明Shadow DOM的应用场景有哪些? 可以将 shadow DOM 视为"DOM中的DOM".它是自己独立的DOM树,具有自己的元素和样式,与原始DOM完全 ...
- [html] 说说你对影子(Shadow)DOM的了解
[html] 说说你对影子(Shadow)DOM的了解 web component的API,用来给组件创建子DOM树,就像楼上说的,不受外部style影响,外部通过选择器查询也不会查到里面来.它有两种 ...
- React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最终可以通过渲 ...
- Vue中虚拟DOM的理解
Vue中虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最终可以通过渲染操作使这 ...
最新文章
- 在线视频解决方案供应商
- 算法学习:AC自动机
- 记一个自己项目上线的全过程
- unity------------------------------transform.forward与Vector.forward的区别
- sql排名名次分页mysql_mysql 实现排名及中文排序实例[分页累加行号]
- (自定义组件)通用- X轴横向:溢出滚动 (含代码)- 案例篇
- 前端-requests-flask对应关系 restful
- iOS:栈、堆、字符串常量区、全局区
- 火狐浏览器插件学习01
- 老王教您怎么做cass7.1 8.0 9.1所有系列的复制狗 加密狗 破解狗
- SQL sever 中yyyyMMddmmss字符串转日期
- CodeCraft-20 (Div. 2) E. Team Building(状压dp)
- 单片机8位共阴极数码管0~99自增
- 让女人爱上你 打动女人的5大法门
- Oracle表中序列号的添加
- oracle pfm,多平台监控管理 日立JP1/PFM 性能详解
- Python中 val[0:-1] 切片选择
- cloudflare免费设置_Cloudflare 设置教程 | 利用cloudflare提速外贸网站
- 浏览器调用本地应用程序
- ftp 操作,支持断点续传或者继续下载。
热门文章
- : Attribute xmlns was already specified for element web-app.
- 浅析 Go IO 的知识框架
- windows和linux没有启动选择,重装Windows后,LILO启动选单不见了,无法进入Linux系统怎么办...
- 实战:Docker容器虚拟化技术(使用DockerFile构建镜像并搭建 swarm+compose集群)5
- 基于CentOS7,MySQL5.7的主从复制架构搭建实战
- 领域驱动模型VO,BO,PO,DO,DTO概念及其区别
- Android 开发者的 RxJava 详解(一)
- shell中四大循环介绍及使用
- SAP “麻辣三人行”小厨房|用黑科技“烹制”HR数字料理
- CSS多行显示省略号