Shadow DOM，使用它的目的

Question

我最近研究了Shadow DOM，我想知道使用它而不是主要目標是什麼。

它給出了什麼？爲什麼我們不使用標準DOM而是使用標準DOM（除了樣式範圍）？

Answer 1

它允許你封裝功能，有效地把它放在黑盒子裏。這意味着您可以創建內部運作未暴露的[可重用]組件。使用標準DOM這是不可能的。

作爲一個例子，需要HTML輸入元素。所以，說，file類型的輸入。要在HTML頁面上使用它，只需添加<input type="file" />，它就可以工作。你不需要添加任何額外的代碼或HTML或CSS來處理它的工作方式，它只是做，而且你不能訪問它的內部位。如果你要編寫一段用戶界面，使用HTML/CSS/JS，做同樣的事情，這將是相當複雜的。但file輸入只是一個可以在任何地方使用的標籤，它總是做同樣的事情。 Web組件系列規範允許您創建自己的以這種方式工作的元素，並且Shadow DOM是其中的關鍵部分。您可以創建一個新元素，如<my-fantastic-file-input />，其功能已封裝。它有自己的內部DOM子樹，但該子樹不是直接可訪問;同樣有範圍的樣式。新組件不會將其實現細節公開給文檔。

您可以完成大部分使用DOM這個東西，但的實施將全部綁到文檔/應用程序結構。使用組件，您可以提取該實現，並且可以重用它，傳遞它，發佈它並讓其他人將其放入應用程序/文檔中，並確保它在任何位置以完全相同的方式工作。由於目前使用標準DOM，所以你不能這麼做。

這是從2011年，和略掉過期的，但它的一些可能的用例的組件模型的列表：http://www.w3.org/2008/webapps/wiki/Component_Model_Use_Cases