影子DOM

定义

影子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

影子DOM

定义

应用

事件处理

创建

链接

推荐阅读更多精彩内容