Shadow DOM,使用它的目的

Question

我最近研究过Shadow DOM,我想知道使用它而不是主要的目标是什么.

它给了什么？为什么我们不使用标准DOM而不是它(除了样式范围)？

Answer 1

它允许您封装功能,有效地将其放入黑盒子中.这意味着您可以创建[可重用]组件,其内部工作不会暴露; 使用标准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