今天使用“Shadow DOM”？答案

【问题标题】：Using a "Shadow DOM" today?今天使用“Shadow DOM”？
【发布时间】：2013-10-29 06:35:14
【问题描述】：

我对所有 Shadow DOM 和 Web 组件的东西很迷茫，所以请原谅我......

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

目的只是为了让大多数人更轻松地处理数据、处理数据、归档和查询数据，方法是提供一种事实上的标准方法，恰好使用每个人都已经熟记的 API。对吗？

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

【问题讨论】：

标签： html shadow-dom

【解决方案1】：

另外，我在W3C的主题上找到了这个：

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

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

Shadow DOM 是指浏览器包含子树的能力将 DOM 元素放入文档的呈现中，但不放入主文档 DOM 树。

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

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

然后可以如下图查看：

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

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

所以虽然 Shadow DOM 是一种 Web Components 技术，但请参阅MDN's page on Web Components 由这四种技术组成（尽管每种技术都可以单独使用）：

自定义元素：能够创建您自己的自定义 HTML 标记和元素。他们可以有自己的脚本行为和 CSS 样式。它们是 Web 组件的一部分，但也可以单独使用。
HTML 模板：HTML 模板元素<template> 是一种用于保存在页面加载时不呈现但随后可能在运行时实例化的客户端内容的机制使用 JavaScript。将模板视为存储以供后续在文档中使用的内容片段。
Shadow DOM：为 Web 组件中的 JavaScript、CSS 和模板提供封装。 Shadow DOM 使得这些东西与主文档的 DOM 保持分离。您还可以在 Web 组件之外单独使用 Shadow DOM。
HTML Imports：旨在作为 Web Components 的打包机制，但您也可以单独使用 HTML Imports。您可以通过在 HTML 文档中使用 <link> 标记来导入 HTML 文件。

以下是三个 Web 组件库：

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

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

【讨论】：

【解决方案2】：

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

就当今使用这些尖端技术而言，请查看来自 Google 的开源 Polymer Project。它包括一组 polyfill，将 Web 组件和所有相关技术带到每个现代浏览器中，以及一些语法糖化，使使用这些东西变得更加愉快。

【讨论】：