1

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

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

其目的仅仅是通过提供一种事实上的标准方式，恰好使用每个人都已经熟记的 API，从而使对大多数人来说更容易处理数据、处理数据、归档和查询数据。正确的？

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

4

2 回答 2

3

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

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

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

影子 DOM 是指浏览器能够将 DOM 元素的子树包含到文档的呈现中，但不能包含到主文档 DOM 树中。

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

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

然后可以如下图查看： 在此处输入图像描述

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

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

所以虽然 Shadow DOM 是 Web 组件的一种技术，但请参阅MDN 的 Web 组件页面，它由这四种技术组成（尽管每种技术都可以单独使用）：

  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 Components 的打包机制，但您也可以单独使用 HTML Imports。<link>您可以使用HTML 文档中的标记导入HTML 文件。

以下是三个 Web 组件库：

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

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

于 2016-03-17T00:16:33.097 回答
2

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

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

于 2013-10-21T22:59:40.387 回答