今天使用“Shadow DOM”？

Question

我很迷茫所有的Shadow DOM和Web Components的东西，所以原谅我...

我认为Shadow DOM的想法是让您的应用程序中的所有数据生活在一个数据结构的API工程完全像传统的DOM。正确？

简单地说，通过提供一种事实上的标准方式来实现使用大家已经熟悉的API，简化数据，处理数据，归档和查询数据，这对于大多数人来说更容易。正确？

如果是这样，有什么办法（图书馆？），我现在可以开始用这种方式做事了吗？

Answer 1

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

就今天使用这些尖端技术而言，请查看Google的开源Polymer Project。它包含一组polyfills，可将Web Components和所有相关技术带到每个现代浏览器，以及一些使这些东西更加愉快的语法糖。

Answer 2

此外，我发现这个关于这个问题从W3C：

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

那么基于什么刚刚表明我，我已经找到了最好的解释是这样的，从What the Heck is Shadow DOM?如下图所示：

影子DOM是指浏览器包含一个子树的能力 将DOM元素转换为文档的渲染，但不转化为 主文档的DOM树。

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

所以虽然它存在于DOM中，但它隐藏在呈现它的页面中。因此，要查看Shadow DOM，可以在Chrome中的“开发工具”下启用它。

然后你就可以查看它，如下图所示：

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

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

因此，虽然阴影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导入：打算成为Web组件的打包机制，但您也可以使用HTML导入本身。您通过在HTML文档中使用<link>标签导入HTML文件。

这里有三个Web组件库：

• 聚合物（使用全部四项技术），
• X-标签（仅使用自定义元素），
• 和玻色（只使用自定义元素，其自称为低级UI元素的库）。

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