Introduction
Web components 的美好已漸漸的被 web developers 認可，透過 UI / behavior 的封裝讓它可以在不同的 framework 唱行無礙的運作，輕輕鬆鬆達到 One for All 的至高境地。
Shadow DOM 是組成 web component 的要素之一，透過 Shadow DOM 的置入，我們可以讓 web component 達到表裡不一的呈現，更棒的是它如同結界般的設置，讓外頭的樣式以及結構的變化都無法撼動 web component 的呈現與互動。
日前，幾個主流瀏覽器都已經開始支援 Declarative Shadow DOM，這會為 web component 的開發帶來何樣的變化呢？這也本篇想要介紹給大家的主題。
Usual development
現行的開發模式通常都會把 template 以及定義 web component 的 class 擺放在同一處，並且透過呼叫 attachShadow 這個 method 來活性化 ShadowRoot，緊接著便把 template 的內容年入其中，這就是 web component 真正的呈現結構。
當 developers 把 template 和 class 封裝到某個 JavaScript file 後，如果有樣式或者結構上的調整，就只能對檔案進行編輯並重新發布才能完成。
筆者還蠻習慣這樣的開發模式，畢竟 web component 本來就該是獨立超然的存在。不過事情本來就是正反兩面的觀點，如此設計確實也少了些彈性變化！
除此之外由於呈現被封裝在 Shadow DOM 裡頭，對於傳統爬頁面、刮資料的爬蟲來說實屬不易，它更本不會知道這個 element 所代表的意涵，所以有一派建議可以把文字介紹置入 Light DOM 中（因為 Light DOM 中的東西不會 render 出來），如此一來便可以有效解決 SEO issue。
這也是 Declarative Shadow DOM 想要解決的主要問題。
Apply Declarative Shadow DOM in development
Declarative Shadow DOM 用法蠻有意思，使用方法更是容易，如範例所示，web developers 直接在 web component 裡頭置入 template[shadowrootmode=open] 後，在有支援的情況下，runtime 便會執行以下動作：
- 將 template[shadowrootmode=open] 從 web component 中移除。
- 呼叫 attachShadow 讓 shadowRoot 活性化
- 將 template[shadowrootmode=open] 的內容直接 append 到 shadowRoot 裡。
如此一來 web developers 在設置 web component 的當下亦可同時把欲呈現的結構與樣式一起輸出，對於傳統的 SEO 爬蟲也可以清楚的知曉這個 element 裡頭隱含的真正的內容是什麼了。如此便可以輕易的解決 web devlopers 的痛點了～
筆者建議傳統與新支援可以並存，算是提供一個彈性給 client，所以 constructor 裡頭的 shadowRoot 判斷不可少，藉此獲得最大程度支援！
Avoiding the flash of unstyled content
為了避免 FOUC 現象發生，筆者建議可以設置相關的 CSS 讓 web compoent 還沒 defined 前可以先隱藏，避免造成瀏覽上的不適（畫面閃爍）。
Conclusion
以上便是 Declarative Shadow DOM 所帶來的嶄新開發體驗，著實對 development 與 client 帶來一定程度的便利性。可以與既有的開發模式並行著支援，提供最大程度的便利！
感謝閱讀，希望本篇內容能有效地幫助到大家～ #DeclarativeShadowDOM #WebComponents