10

我希望在页面的多个位置呈现“相同”的 HTML 元素。这个元素是脚本/动画的，各种渲染需要保持同步。

我考虑过的解决方案包括：

  1. 将元素的副本放在多个位置并更新所有位置。这是我试图避免的。
  2. 将元素的副本放在多个位置。更新其中一个副本，并使用突变事件来捕获这些更改并针对其他副本重放它们。似乎工作量很大。
  3. 使用影子 DOM。我对这个替代方案寄予厚望，它最初似乎是可能的，使用“插入点”，它允许这里的 DOM 子树虚拟地放置在那里的 DOM 子树中。

我还没有测试过Chrome 25 中提供的最后一个替代方案。W3C 规范说：

值得特别考虑的一种情况是插入点是另一个影子主机的子节点的情况......一个节点被分布到多个插入点的效果称为重投影。

但是之后...

尽管在重投影期间被分配到多个插入点，但由于重投影发生的约束，节点仍然只渲染一次：由于插入点仅在它们是影子主机的子节点时才受到重投影，因此它们是从未渲染。相反，阴影树被渲染在他们的位置。

影子 DOM 似乎有可能做我想做的事情并且值得测试，还是有其他推荐的方法？

4

1 回答 1

8

Shadow DOM 重投影不能满足您的要求。

我是在 Chrome 中实现 Shadow DOM 的团队的一员。规范中的评论是正确的——Shadow DOM 中的内容最多渲染一次。

以下是一些可能有用的想法，具体取决于您要实现的目标：

Firefox 有一个实验性功能，可以将元素用作背景。这是在 CSS 中使用的background: -moz-element(#foo);，其中foo是您要复制的元素的 ID。图像是“活的”；元素的变化会反映在它用作背景的任何地方。

Using-moz-element有一些潜在的缺点： 它只在某些版本的 Firefox 中实现；它是实验性的，这意味着该功能可能会在某个时候改变或消失；并且副本不是交互式的——你不能点击那里的按钮，将鼠标悬停在副本上不会触发:hover样式，等等。

如果您希望所有副本都是交互式的，请使用 Mutation Observers。有一个名为 Mutation Summary 的库，它包装了 Mutation Observers 并包含一个示例 Chrome 扩展，它反映了整个页面。您可以调整它以镜像 DOM 的子树。根据您的应用程序，您还可以使用 Mutation Observers 来双向镜像 DOM。

于 2013-03-01T13:29:59.113 回答