0前言
<span style="font-weight: normal;">Shadow DOM的权威文档请参阅:</span>
<span style="font-weight: normal;">Shadow DOM作用主要是方便前端开发特别是组件的开发。具体怎么方便的,主要就是它是特殊的渲染机制和隔离机制,后面将分别来解释这两种机制。如果看完该篇博客还不太理解,后面将有会一篇用Shadow DOM开发简单组件的。另外,Web安全领域也有人很关注这个新东西,比如在2014年的CCS会议上就有将其用于安全的Paper。在该专题的最后可能会有有一篇安全方面的博客。该篇中用到的例子,是一个百度一下最容易找到的例子,我把它借过来又整理增强了一下,用来解释我要解释的东西。</span>
</pre><h3>I到底是啥</h3><pre name="code" class="html"><span style="font-weight: normal;">废话少说,搞一个例子,一看便明白:</span>
<pre name="code" class="html"><style>#btn{}</style>
<button id='btn'>raw text</button>
<script>
var host = document.querySelector('#btn');//记得引用jquery
alert(host);
var shadowRoot = host.createShadowRoot();//在该button元素上创建一个ShadowRoot
shadowRoot.textContent = 'shadow text';//设置ShadowRoot的文本
</script>
<span style="background-color: rgb(255, 255, 255);">效果应该是这样的:</span>
<button id="btn">shadow text</button>
<span style="background-color: rgb(255, 255, 255);">这里我们在button上创建了一个shadowroot,把shadow的文本设为“shadow text”。结果显示,原来的button内容看上去像是被shadowRoot的内容覆盖了。至于为啥,请看下一节。</span>
<span style="background-color: rgb(255, 255, 255);">
</span>
II 渲染机制
接着上面的例子来:
<pre name="code" class="html"><style >#btn{font-size:20pt;color:red;}</style>
<button id='btn'>raw text</button>
<script>
//获取button对象
var host = document.querySelector('button');
//创建button对象相对应的shadowRoot
alert('now shadowRoot has not been created');
var root = host.createShadowRoot();//创建ShadowRoot
//设置shadowRoot的显示内容
root.textContent = 'shadow text';
//设置shadowRoot的id
root.className='sd';
在alert弹窗之前应该是这个效果:
可以看出:Shadow DOM使得浏览器在渲染时,如果某普通DOM元素有对应的Shadow DOM元素则用相应的shadow DOM元素来替代它参加渲染。
另外,可以看出实际参加渲染的Shadow DOM元素继承了它在DOM树的插入点的CSS样式(红色+20pt字体)。
III隔离(一)
接着搞: