关于影子(shadow)DOM

清风笑～

已于 2022-11-15 10:18:46 修改

阅读量2.5k

点赞数 1

分类专栏： css 文章标签： javascript 前端 vue.js

于 2019-12-12 22:41:16 首次发布

本文链接：https://blog.csdn.net/ling369523246/article/details/103514907

版权

经常写video，audio等html元素在带的控制条或者模块，但是这这些模块哪里来的用什么实现的
在这里插入图片描述
发现步骤

进入setttins, 在elements里勾选

如此打开新世界的大门

隐藏有点深刻，难以发现。

那什么是影子DOM

影子dom这个东西的存在，主要解决dom树建立时能够实现维护自身边界的问题。这么说有点像vue的scope保证自身不会被外来修饰入侵或者污染。
影子dom将对应的dom信息隐藏起来依然能在html文档里渲染出来。但不能通过普通的js方法获取到dom信息
影子dom事件捕获遵从常规dom事件，在影子dom内部依然传递，同时也遵从事件冒泡，向整个文档的dom上传递事件。

影子树和文档
在这里插入图片描述

创建影子树

通过createShadowRoot创建影子树root节点

<!DOCTYPE html>
<html>
<head>
	<title>影子dom</title>
	<link rel="dns-prefetch" href="//dfhs.tanx.com">
	<style>
		.box {
     
			height: 80px;
			width: 80px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="box" class="box"></div>
</body>
<script>
	var $box = document.getElementById('box');
	var shadowRoot = $box.createShadowRoot(); // 获得root
	//var showRoot = $box.webkitGetShadowRoot() // webkit 支持
	var children = document.createElement('div');
	children.setAttribute('style', 'height: 40px; width: 40px; background-color: blue');
	shadowRoot.appendChild(children);
</script>
</html>

效果图
在这里插入图片描述
再给影子树节点添加css时不能用过class或者元素选择来添加，否则无效果

<!DOCTYPE html>
<html>
<head>
	<title>影子dom</title>
	<link rel="dns-prefetch" href="//dfhs.tanx.com">
	<style>
		.box {
     
			height: 80px;
			width: 80px;
			background-color: red;
		}
		.children {
     
			height: 40px;
			width: 40px;
			background-color: blue;
		}
		div {
     
			height: 40px;
			width: 40px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<video src="test.mp4" height="200px" controls></video>
	<audio src="mp3.mp3" controls></audio>
	<canvas></canvas>
	<div id="box" class="box"></div>
</body>