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