在前一篇博文中,简单地介绍了Shadow DOM是什么。
本文,将重点介绍Shadow DOM能做什么、如何创建Shadow DOM以及Shadow DOM的相关概念。
Shadow DOM 能做什么
简单地说,有了Shadow DOM(若浏览器支持该规范),开发者可以封装HTML标签,CSS样式以及JavaScript,提供一个新的作用域空间。Shadow DOM结合后续将介绍的其他Web Components技术,开发者将具有开发出类似<input type="time">或者类似<audio>、<video>这样的标签的能力。
如何创建Shadow DOM
要创建Shadow DOM,首先需要选择Shadow DOM挂载的节点,然后调用createShadowRoot()方法,创建一个Shadow DOM的根节点,在这个根节点上可以添加任意的由普通HTML标签形成的DOM节点,从而形式由一颗DOM Tree。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> </head> <body> <div class="host">Hello World!</div> <script> var host = document.querySelector('.host'); var root = host.createShadowRoot(); var node = document.createElement('h1'); node.textContent = 'Shadow DOM 介绍'; var para = document.createElement('p'); para.textContent = 'Shadow DOM 详细信息'; root.appendChild(node); root.appendChild(para); </script> </body> </html>
上述代码中,首先选择了class为host的节点,然后在这个节点上调用createShadowRoot()方法创建Shadow DOM的根节点root。然后再分别创建了两个普通HTML节点并设置其内容,最后将它们添加到root上。
运行结果,如下图所示:
从运行结果可以看到,原来div中的“Hello World!"内容并没有在浏览器中渲染出来,而是渲染Shadow DOM中的内容。这也是Shadow DOM的一个特性,在后续的介绍中将会进行详细解释。
Shadow DOM的相关概念
在上一节中,为了创建Shadow DOM,先需要选择一个DOM 节点,然后调用createShadowRoot()方法创建Shadow DOM的根节点。这个根节点,称为Shadow Root。与Shadow Root关联的那个节点称为Shadow Host。与Shadow DOM对应,常规的DOM,称为Light DOM。在Light DOM与Shadow DOM之间存在一个边界,称为Shadow Boundary。Shadow Boundary的重要作用就是,避免了Light DOM中的样式渗透到Shadow
DOM中,从而避免了样式冲突等问题。