影子DOM
2022-10-20 本文已影响0人
从不放弃
定义
影子DOM的规范草案能够使得一些DOM节点在特定范围内可见，而在网页的DOM树中却不可见，但是网页渲染的结果中包含了这些节点，这就使得封装变得容易很多。
image.png
应用
HTML5支持了很多新的特性，例如对视频、音频的支持，读者会发现这些元素其实是由很复杂的控制界面组成，这些界面也是使用HTML元素编写，但是在DOM树中，你无法找到相应的节点，这其实也是使用了影子DOM的思想。
事件处理
因为影子DOM的子树在整个网页的DOM树中不可见，那么事件是如何处理的呢？
事件中需要包含事件目标，这个目标当然不能是不可见的DOM节点，所以事件目标其实就是包含影子DOM子树的节点对象。
事件捕获的逻辑没有发生变化，在影子DOM子树内也会继续传递。
当影子DOM子树中的事件向上冒泡的时候，WebKit会同时向整个文档的DOM上传递该事件，以避免一些很奇怪的行为。
创建
<html>
<body>
<div id="div"></div>
<script type="text/javascript">
window.onload=function(){
var adiv=document.getElementById("div");
//var root=adiv.webkitCreateShadowRoot();
let root = adiv.attachShadow({ mode: 'open' });
var shadowImg=document.createElement("img");
shadowImg.src="apic.png";
root.appendChild(shadowImg);
var shadowDiv=document.createElement("div");
shadowDiv.innerHTML="This is a div from shadow dom!";
root.appendChild(shadowDiv);
}
</script>
</body>
</html>
链接
https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM
