定義
影子DOM的規(guī)范草案能夠使得一些DOM節(jié)點(diǎn)在特定范圍內(nèi)可見欧募，而在網(wǎng)頁的DOM樹中卻不可見温圆，但是網(wǎng)頁渲染的結(jié)果中包含了這些節(jié)點(diǎn)置鼻，這就使得封裝變得容易很多圆裕。
image.png
應(yīng)用
HTML5支持了很多新的特性，例如對視頻逆趣、音頻的支持津肛，讀者會發(fā)現(xiàn)這些元素其實(shí)是由很復(fù)雜的控制界面組成，這些界面也是使用HTML元素編寫汗贫，但是在DOM樹中身坐，你無法找到相應(yīng)的節(jié)點(diǎn)，這其實(shí)也是使用了影子DOM的思想落包。
事件處理
因?yàn)橛白覦OM的子樹在整個(gè)網(wǎng)頁的DOM樹中不可見部蛇，那么事件是如何處理的呢？
事件中需要包含事件目標(biāo)咐蝇，這個(gè)目標(biāo)當(dāng)然不能是不可見的DOM節(jié)點(diǎn)涯鲁，所以事件目標(biāo)其實(shí)就是包含影子DOM子樹的節(jié)點(diǎn)對象。
事件捕獲的邏輯沒有發(fā)生變化，在影子DOM子樹內(nèi)也會繼續(xù)傳遞抹腿。
當(dāng)影子DOM子樹中的事件向上冒泡的時(shí)候岛请，WebKit會同時(shí)向整個(gè)文檔的DOM上傳遞該事件，以避免一些很奇怪的行為警绩。
創(chuàng)建
<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
