今天使用“Shadow DOM”？

Question

我对所有Shadow DOM和Web Components的东西都很丢失，请原谅我......

我认为Shadow DOM的想法只是让你的应用程序中的所有数据都存在于一个数据结构中，其API的工作方式与传统的DOM完全相同。正确的吗？

目的仅仅是为了解决数据，处理数据，归档和查询数据，通过提供事实上的标准方式来实现这一点，这恰好使用了每个人都已经知道的API。正确的吗？

如果是这样的话，有没有办法（图书馆？）我现在就可以开始用这种方式弄湿自己了？

Answer 1

此外，我在W3C：

的主题中找到了这个

• 文档树是节点树[DOM]，其根节点是文档。
• 任何元素都可以托管零个或一个关联的节点树，称为影子树。
• 影子根是影子树的根节点。
• 组件树是文档树或影子树。

因此，基于我刚刚展示的内容，我发现的最佳解释来自What the Heck is Shadow DOM?，如下所示：

  

Shadow DOM是指浏览器包含子树的能力   DOM元素进入文档的渲染，但不进入   主文档DOM树。

一个重要的用例是网页上的视频控件。标记仅显示视频标记，包含一些属性和源标记。所有视频操作的附加代码都隐藏在Shadow DOM中，不可用于页面的其余部分。封装了<video>标记的实际标记，javascript和样式，这隐藏了每个浏览器供应商已经编写的视频控件的实现细节。

因此，虽然它存在于DOM中，但它隐藏在呈现它的页面之外。因此，要查看Shadow DOM，您可以在Chrome中的Dev Tools下启用它。

然后您可以查看如下所示：

简短的回答是，Shadow DOM是构成Web组件的四种技术之一。这就是它与Web组件的关系。

对于定义，Web组件是：W3C的组件平台，允许从标准化构建块构建Web站点。 Web组件包括自定义元素，Shadow DOM和HTML导入和模板。

因此，虽然Shadow DOM是Web组件的技术，但请参阅MDN's page on Web Components包含这四种技术（尽管每种技术可以单独使用）：

1. 自定义元素：是一种用于创建自己的自定义HTML标记和元素的功能。他们可以拥有自己的脚本行为和CSS样式。它们是Web组件的一部分，但它们也可以单独使用。

2. HTML模板：HTML模板元素<template>是一种用于保存客户端内容的机制，该内容在加载页面时不会呈现，但随后可能会被实例化在运行时使用JavaScript。将模板视为正在存储的内容片段，以便随后在文档中使用。

3. Shadow DOM ：为Web组件中的JavaScript，CSS和模板提供封装。 Shadow DOM使得这些东西与主文档的DOM保持独立。您也可以在Web组件之外单独使用Shadow DOM。

4. HTML Imports ：旨在成为Web组件的打包机制，但您也可以单独使用HTML Imports。您可以使用HTML文档中的<link>标记导入HTML文件。

以下是三个Web Components库：

• 聚合物（使用所有四种技术），
• X-Tag（仅使用自定义元素），
• 和Bosonic（仅使用自定义元素，它自称为低级UI元素库）。

我还发现了这个可能感兴趣的网站：Web Components.org讨论和发展Web组件最佳实践的地方

Answer 2

这绝对是Web组件的目的之一（将整个应用程序包装在一个封装的，可重用的DOM元素中），并且你完全有理由以这种方式使用它。然而，理想的用途会一直延伸到应用程序中。您可以想象成为可重复使用的“小部件”的应用程序的任何部分也可以从Shadow DOM封装中受益。想象一下由50人团队开发的应用程序，其中组件之间存在特定的边界和明确定义的API。很少有CSS冲突，难以阅读的代码和紧密耦合，大多数网络应用程序都接近这个规模。

就目前使用这些尖端技术而言，请查看Google的开源Polymer Project。它包括一组polyfill，它们将Web组件和所有相关技术引入到每个现代浏览器中，以及一些使这些东西更有趣的语法糖果。