今天使用「Shadow DOM」？

Question

我很迷茫所有的Shadow DOM和Web Components的東西，所以原諒我...

我認爲Shadow DOM的想法是讓您的應用程序中的所有數據生活在一個數據結構的API工程完全像傳統的DOM。正確？

簡單地說，通過提供一種事實上的標準方式來實現使用大家已經熟悉的API，簡化數據，處理數據，歸檔和查詢數據，這對於大多數人來說更容易。正確？

如果是這樣，有什麼辦法（圖書館？），我現在可以開始用這種方式做事了嗎？

Answer 1

這絕對是Web組件的用途之一（將整個應用程序封裝在一個封裝的，可重用的DOM元素中），並且您完全有理由僅以這種方式使用它。然而，理想的用途會一直延伸到應用程序中。你的應用程序的任何部分，你可以想象成一個可重用的「小部件」，也可以受益於Shadow DOM封裝。想象一下由50人組成的團隊開發的應用程序，其中組件之間有特定的邊界和定義良好的API。很少有CSS衝突，難以閱讀的代碼，以及緊密耦合，大多數網絡應用程序都可以接近這種尺寸。

就今天使用這些尖端技術而言，請查看Google的開源Polymer Project。它包含一組polyfills，可將Web Components和所有相關技術帶到每個現代瀏覽器，以及一些使這些東西更加愉快的語法糖。

Answer 2

此外，我發現這個關於這個問題從W3C：

• 文檔樹是一個節點樹[DOM]，其根節點是一個文件。
• 任何元素都可以承載零個或一個關聯的節點樹，稱爲影子樹。
• 陰影根是影子樹的根節點。
• 組件樹是文檔樹或影子樹。

那麼基於什麼剛剛表明我，我已經找到了最好的解釋是這樣的，從What the Heck is Shadow DOM?如下圖所示：

影子DOM是指瀏覽器包含一個子樹的能力 將DOM元素轉換爲文檔的渲染，但不轉化爲 主文檔的DOM樹。

一個重要的用例是在網頁上的視頻控件。標記僅顯示一個視頻標記，包含一些屬性和源標記。所有要運行的視頻操作的附加代碼都隱藏在Shadow DOM中，並且不可用於頁面的其餘部分。 <video>標籤的實際標記，javascript和樣式被封裝，這隱藏了每個瀏覽器供應商已經編寫的視頻控件的實現細節。

所以雖然它存在於DOM中，但它隱藏在呈現它的頁面中。因此，要查看Shadow DOM，可以在Chrome中的「開發工具」下啓用它。

然後你就可以查看它，如下圖所示：

簡短的回答是，影子DOM是四個技術構成Web組件之一。這就是它與Web組件的關係。

對於一個定義，Web組件是：W3C的一個組件平臺，允許從標準化構建塊構建Web站點。 Web組件包含自定義元素，Shadow DOM和HTML導入和模板。

因此，雖然陰影DOM是Web組件的技術，看到MDN's page on Web Components由以下四種技術（雖然每一個都可以單獨使用）：

1. 自定義元素：是創建你自己的能力自定義HTML標籤和元素。他們可以擁有自己的腳本行爲和CSS樣式。它們是Web組件的一部分，但它們也可以單獨使用。

2. HTML模板：HTML模板元素<template>是用於保持被加載時，一個頁不被渲染，但隨後可在運行時期間使用JavaScript來實例化的客戶端內容的機制。將模板想象爲正在被存儲以供隨後在文檔中使用的內容片段。

3. Shadow DOM：爲Web組件中的JavaScript，CSS和模板提供封裝。 Shadow DOM使它與主文檔的DOM保持獨立。您也可以在Web組件之外單獨使用Shadow DOM。

4. HTML導入：打算成爲Web組件的打包機制，但您也可以使用HTML導入本身。您通過在HTML文檔中使用<link>標籤導入HTML文件。

這裏有三個Web組件庫：

• 聚合物（使用全部四項技術），
• X-標籤（僅使用自定義元素），
• 和玻色（只使用自定義元素，其自稱爲低級UI元素的庫）。

我也發現這個網站可能會感興趣：Web Components.org討論和發展Web組件的最佳實踐