是不是很棒？想想看，您可以裝飾 Shadow DOM 內的元素而不用實際的去存取它們。而且建立這個 Shadow DOM subtree 的人也能決定哪些部份可以被裝飾。當你在打造 UI Widget 工具包的時候，難道不想擁有這樣子的權力嗎？
Shadow 有 API 接口，這對瘋狂科學家們有什麼意義？
談到很棒的能力，我們可以來看看替 shadow DOM subtree 添加一個元素會發生什麼事情？下面做個實驗：
//建立一個帶有 Shadow DOM subtree 的元素。
var input = document.body.appendChild(document.createElement('input'));
//加入一個子元素。
var test = input.appendChild(document.createElement('p'));
//..寫一些文字。
test.textContent = 'Team Edward';
顯示如下：
哇嗚！歡迎來到 twilight DOM - 在畫面上看不見，但是會在 HTML DOM 出現的網頁區塊。它有什麼用處嗎？不是很確定。不過你想要就可以用。年輕人似乎喜歡這種 fu。
但是如果我們確實有辦法像 Shadow DOM subtree 的一部分那樣顯示 element 的 children 又能作什麼？把 Shadow DOM 想像成一個有 API 的樣板，透過 API 你可以看得到 element 的 children：
//注意：以下是虛擬碼，不是真的API。
var element = document.getElementById('element');
///建立一個 Shadow subtree。
element.shadow = document.createElement('div');
element.shadow.innerHTML = '
Think of the Children
' +
{{children-go-here}}
';
// Now add some children.
var test = element.appendChild(document.createElement('p'));
test.textContent = 'I see the light!';
因此，如果你 traverse DOM 一遍，你會看到：
<div id="element">
<p>I see the light</p>
</div>
但是畫面上顯示的卻是：
<div id="element">
<div> <!-- shadow tree begins -->
<h1>Think of the Children</h1>
<div class="children"> <!-- shadow tree hole begins -->
<p>I see the light</p>
</div> <!-- shadow tree hole ends -->
</div> <!-- shadow tree ends -->
</div>
幫 element 這個 div 增加 children 之後，如果你在 DOM 中觀察這些 element，看起來就跟平常的 element 沒兩樣；但是在呈現時，他們會被傳進 Shadow DOM subtree 的 API 接口裡。
