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