Shadow DOM系列1-簡介

英文連接：Shadow DOM: Introduction, 26 AUGUST 2013 on Web Components, Shadow DOM

咱們今天要討論一個有時候十分使人費解的大話題：Shadow DOM。這個話題多是至少在過去的 5-10 年內前端開發最具備革命性的新技術之一。因爲太過宏大，一篇博文不足以蔽之，我決定將其分紅一個專題系列，在接下來的幾周詳盡闡述。

如今讓咱們用一個整體的介紹來開始這個系列：什麼是 Shadow DOM？它爲什麼這麼重要？

什麼是 Shadow DOM

若是說要用一個例子來解釋 Shadow DOM，我認爲 <video> 標籤最爲適合。咱們看下下面這個例子：

實例視頻

例子視頻的 DOM 標籤十分的簡單：

<video controls autoplay name="media">  
    <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
</video>

主要是有一個 <video> 標籤包裹着 <source> 標籤。可是你仔細想一想，這裏面其實大有文章。視頻播放器自己有播放/暫停按鈕、進度條、視頻時間顯示、音量控制以及播放時的一個全屏切換按鈕。既然 DOM 源碼這麼幹淨，那實現這些組件的代碼是從哪兒來的呢？

「影子」

事實上，各大瀏覽器的廠商已經編寫了播放器的組件代碼使之可以正常運做。若是你打開 Chrome 的開發者工具，點擊右上角的「Settings」按鈕，

[+]查看原圖

勾選「Show user agent shadow DOM」，

[+]查看原圖

你就能夠看到視頻播放器 DOM 結構的細節。

看到標灰的 #shadow-root 了嗎？這裏就是全部視頻播放器控制組件的所在之處。瀏覽器之因此將其置灰，是爲了代表這部分是在 shadow DOM 裏，對於頁面的其餘部分來講它是不可用的。這裏的不可用意味着你寫的 CSS 選擇器和 JavaScript 代碼都不會影響到這部份內容。實際上，讓 <video>標籤的 UI 可以運行的標籤和樣式都被瀏覽器封裝了。

那麼，什麼是 Shadow DOM 呢？

簡而言之，Shadow DOM 是一個 HTML 的新規範，其容許開發者封裝本身的 HTML 標籤、CSS 樣式和 JavaScript 代碼。Shadow DOM 以及咱們之後將會討論的一些技術，使得開發人員能夠建立諸如 <video> 這樣自定義的一級標籤。總的來講，這些新標籤和相關的 API 被稱爲 Web Components。

Shadow DOM 爲什麼這麼重要

若是你已經作過一段時間的網站開發，你可能聽過 Bootstrap。Bootstrap 是一組 UI 組件的集合，使用它須要將一系列 CSS 樣式、JS 腳本以及規定的 HTML 模式糅合在一塊兒。如下這個例子展現了使用 Bootstrap navabar 所須要編寫的 HTML 結構：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">  
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex6-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>
  <div class="collapse navbar-collapse navbar-ex6-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

因爲沒法封裝 Boostrap 的組件，所以你本身的 HTML 必需要和它文檔上的保持一致。不少時候這就意味着你要從 Boostrap 的說明文檔裏把這一坨代碼複製過來而後粘貼到你的項目中。儘管用這種方法也能夠快速的構建頁面，但這也意味着大部分的頁面標籤都不是你本身寫的，你也沒有深刻了瞭解這些頁面結構。這可能會致使各類潛在的小 bug，你也沒法快速直觀的分析本身的工做——由於你代碼裏都是一坨又一坨的模板。

再考慮一下這個狀況：Boostrap 的 CSS 樣式表有大約 6600 行那麼多，這就意味着任什麼時候候你都有可能一個不當心覆蓋了一個相當重要的選擇器，致使頁面一部分樣式崩壞。你的 JavaScript 代碼也須要和 Bootstrap 的 JavaScript 代碼共存，同時要當心的遵照它的使用方式，而不能擅自變動。

要整的事兒太多了……

額，固然，以上的這一堆麻煩事兒也會一樣發生在你在程序裏要引入的任何第三方 jQuery 插件、動畫引擎、圖表庫、模塊管理等各類組件中……

Shadow DOM 的價值所在

讓咱們想象一下，若是在上一個例子中， Boostrap 的 navbar 的用法像 <video> 標籤同樣，它可能看起來是這樣：

<bootstrap-navbar fixed-top>  
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</bootstrap-navbar>

這樣是否是看起來簡潔多了~

直到最近（此文成文時間是 2013 年 8 月份）這種事情都是不可能實現的。固然你能夠在 HTML 裏定義本身的標籤，可是瀏覽器會把不認識的標籤全當作 <div> 處理，同時你這麼寫也得不到任何特殊的帶有封裝特性的好處。更重要的是，你沒法把 navbar 的實現細節隱藏起來，實現的代碼必須存在於頁面某處。若是你真的想實現一些私有化，你必須使用臃腫無比又難以處理的 <iframe>。Shadow DOM 的引入改變了這一切。

我確信你已經厭倦了個人閒扯，準備碼上一戰了~隨我去下一篇博文，咱們會深刻探討一下 Shadow DOM 並漫談一下它的基礎知識。