【发布时间】：2015-10-31 13:50:00
【问题描述】：
我最近研究了 Shadow DOM，我想知道使用它而不是主要的目的是什么。
它有什么作用？为什么我们不使用标准 DOM 来代替它（样式范围除外）？
【问题讨论】：
标签： javascript html dom shadow-dom
【发布时间】：2015-10-31 13:50:00
【问题描述】：
它允许您封装功能，有效地将其放入黑盒中。这意味着您可以创建不暴露内部工作的 [可重用] 组件；这使用标准 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
【讨论】：