【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彈窗之前應該是這個效果：

而關閉alert彈窗後應該是這個效果：

可以看出：Shadow DOM使得瀏覽器在渲染時，如果某普通DOM元素有對應的Shadow DOM元素則用相應的shadow DOM元素來替代它參加渲染。

另外，可以看出實際參加渲染的Shadow DOM元素繼承了它在DOM樹的插入點的CSS樣式（紅色+20pt字體）。

III隔離（一）

接着搞：