Shadow DOM，使用它的目的 [英] Shadow DOM, aim of using it

问题描述

我最近研究过Shadow DOM，而且我想知道使用它的目的是什么，而不是主要的。

它给出了什么？为什么我们不使用标准DOM而不是它（除了样式化范围）？

解决方案

它允许您封装功能，它在一个黑盒子里。这意味着您可以创建其内部工作不被暴露的[可重复使用]组件;这是不可能使用标准的DOM。

举个例子，使用HTML输入元素。所以说，文件输入的类型。要在HTML页面上使用它，只需添加< input type =file/> 即可。您不需要添加任何额外的代码或HTML或CSS来处理它的工作原理，它只是做，而且您无法访问它的内部位。如果你要写一个UI，使用HTML / CSS / JS，这样做也是相当复杂的。但是，文件输入只是一个可以在任何地方使用的标签，它总是做同样的事情。 Web组件系列产品允许您以这种方式创建您自己的元素，Shadow DOM是其中的关键部分。您可以创建一个新元素，如< my-fantastic-file-input /> ，其功能封装。它有自己的内部DOM子树，但是子树不是直接可访问;同样的风格。新组件不会将其实现细节公开到文档中。

您可以使用DOM，来执行大部分的这些东西，但是实现将完全绑定到文档/应用程序结构中。使用组件，您可以提取该实现，您可以重用它，传递它，发布它，并让其他人将其放入应用程序/文档中，并确保它将以完全相同的方式在任何地方工作。您不能真正做到这一点，因为现在使用标准的DOM。

这是从2011年，稍微过时，但它是一些可能的列表组件模型的用例： http://www.w3.org/2008/webapps/ wiki / Component_Model_Use_Cases

I have studied Shadow DOM recently, and I was wondering what are the aims of using it instead of the main one.

What does it gives ? Why dont we use standard DOM instead of it (except for styling scoping) ?

解决方案

It allows you to encapsulate functionality, effectively putting it in a black box. It means you can create [reusable] components whose inner workings aren't exposed; this is impossible using standard DOM.

As an example, take HTML input elements. So, say, the file type of input. To use it on an HTML page, you simply add <input type="file" />, and it works. You don't need to add any extra code or HTML or CSS to handle how it works, it just does, and you can't access the internal bits of it. If you were to write a piece of UI, using HTML/CSS/JS, that did the same thing, it would be fairly complex. But the file input is just a single tag that you can use anywhere, it always does the same thing. The web component family of specs allow you to create your own elements that work in this way, and the Shadow DOM is a critical part of this. You can create a new element, like <my-fantastic-file-input />, with its functionality encapsulated. It has its own internal DOM subtree, but that subtree isn't directly accessible; ditto with scoped styles. The new component does not expose its implementation details to the document.

You can do most of this stuff using the DOM, but the implementation will be wholly tied into the document/application structure. With components, you extract that implementation, and you can reuse it, pass it around, publish it and let other people drop it into their applications/documents, and be sure it will work in exactly the same way, anywhere. You cannot really do that as things currently stand by using the standard DOM.

This is from 2011, and slightly out-of-date, but it's a list of some possible use cases for the component model: http://www.w3.org/2008/webapps/wiki/Component_Model_Use_Cases

这篇关于Shadow DOM，使用它的目的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！