影子(Shadow) DOM
什么是 Shadow DOM？ Shadow DOM 是一个革命性的新技术，先来看下他是什么样子的 以<video>标签为例非常适合，例如 <video controls autoplay name="media"> <source id="mp4" src="http://xxx.mp4" type="video/mp4"> </video> 用开发者工具查看DOM结构时，就是一个 video 节点，但视频播放器本身有播放/暂停按钮、进度条等按钮，DOM源码这么干净，那实现这些组件的代码是从哪儿来的呢？ 这就是Shadow DOM的概念，可以把一些html标签进行封装，组成一个DOM树的子树，这个子树可以被多处使用 简单理解 Shadow DOM可以帮助我们封装成可复用的界面组件 Shadow DOM 的价值是什么？ 以Bootstrap为例，Bootstrap是一个UI框架，使用它需要将一系列CSS、JS及规定的HTML放到页面上 例如使用导航组件 （1）引入bootstrap css （2）引入jQuery （3）引入Bootstrap js （4）页面中加入bootstrap导航模块的标准化html代码 <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> </div> </nav> 这个使用过程首先是比较繁琐，二是容易出错，因为如果html代码没有完全按照标准写，显示会有问题，或者自己的CSS和bootstrap的css出现冲突，也会出现问题 如果使用 Shadow DOM 进行封装，这个导航的组件使用起来可能就是这个样子的： <bootstrap-navbar fixed-top> <a href="#">首页</a> <a href="#">关于我们</a> </bootstrap-navbar> 这样就非常方便了 Shadow DOM 使用示例 由于 Shadow DOM 是新技术，各浏览器还没有普遍支持 使用 createShadowRoot() 方法创建Shadow DOM，chrome浏览器兼容 <!DOCTYPE html> <html> <head> <title>Shadow DOM</title> </head> <body> <div id="test"></div> <script> var div = document.getElementById('test'); var root = div.createShadowRoot(); var cnt = document.createElement("div"); cnt.innerHTML = "shadow"; root.appendChild(cnt); </script> </body> </html>
腾讯云开发者
