我最近研究过Shadow DOM，我想知道使用它的目的是什么，而不是主要的目标。
它给出了什么？为什么我们不使用标准DOM而不是它（除了样式范围）？
答案 0 :(得分：8)
它允许您封装功能，有效地将其置于黑盒子中。这意味着您可以创建[可重用]组件，其内部工作不会暴露;使用标准DOM是不可能的。
举个例子，拿HTML输入元素。所以，比方说，file类型的输入。要在HTML页面上使用它，只需添加<input type="file" />即可。您不需要添加任何额外的代码或HTML或CSS来处理它的工作原理，它只是这样做，而您无法访问它的内部位。如果您要编写一个使用HTML / CSS / JS的UI，它做了同样的事情，那将会相当复杂。但是file输入只是一个可以在任何地方使用的标记，它总是做同样的事情。 Web组件规范系列允许您创建以这种方式工作的自己的元素，而Shadow DOM是其中的关键部分。您可以创建一个新元素，如<my-fantastic-file-input />，并封装其功能。它有自己的内部DOM子树，但该子树不能直接可访问;与范围样式同上。新组件不会将其实现细节公开给文档。
你可以使用DOM来做大部分这些事情，但是实现将完全绑定到文档/应用程序结构中。使用组件，您可以提取该实现，并且可以重用它，传递它，发布它并让其他人将它放入他们的应用程序/文档中，并确保它在任何地方以完全相同的方式工作。你不能真正做到这一点，因为目前使用标准DOM的东西。
这是从2011年开始，稍微过时，但它是组件模型的一些可能用例的列表：http://www.w3.org/2008/webapps/wiki/Component_Model_Use_Cases