【Shadow DOM】 渲染与隔离

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弹窗之前应该是这个效果：

raw text

而关闭alert弹窗后应该是这个效果：

shadow text

可以看出：Shadow DOM使得浏览器在渲染时，如果某普通DOM元素有对应的Shadow DOM元素则用相应的shadow DOM元素来替代它参加渲染。

另外，可以看出实际参加渲染的Shadow DOM元素继承了它在DOM树的插入点的CSS样式（红色+20pt字体）。

III隔离（一）

接着搞：