镜像HTML元素，可能使用shadow DOM

Question

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

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

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

我还没有测试过最后一个替代方案，即available in Chrome 25。 W3C spec说：

  

值得特别考虑的一个案例是   插入点是另一个影子主机的子节点... 节点的效果   分布在多个插入点称为重投影。

但是......

  

尽管在期间被分发到多个插入点   重投影，一个节点仍然只渲染一次，因为   重复投射的限制因素：自插入以来   积分只有在他们是孩子的时候才会被重新投射   影子主机，它们永远不会被渲染。相反，影子树是   在他们的位置呈现。

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

Answer 1

Shadow DOM重投影不能达到你想要的效果。

我是Chrome中实施Shadow DOM的团队成员。规范中的注释是正确的 - Shadow DOM中的内容最多只渲染一次。

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

Firefox有一个实验性功能，其中an element can be used as a background.使用background: -moz-element(#foo);将其连接到CSS中，其中 foo 是您要复制的元素的ID。图像是“实时”;对元素的更改会在用作背景的任何位置反映出来。

使用-moz-element有一些潜在的缺点：它只在某些版本的Firefox中实现;它是实验性的，这意味着该特征可能在某些时候发生变化或消失;并且副本不是交互式的 - 您无法单击其中的按钮，将鼠标悬停在副本上不会触发:hover样式，依此类推。

如果您希望所有副本都是交互式的，请使用Mutation Observers。有a library called Mutation Summary包含Mutation Observers并包含镜像整个页面的an example Chrome extension。您可以调整它以镜像DOM的子树。根据您的应用程序，您还可以使用Mutation Observers以双向镜像DOM。