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

Question

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

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

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

我还没有测试过Chrome 25中提供的最后一种替代方案.在W3C规范说:

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

但是之后...

尽管在重投影期间分布到多个插入点,但由于重复投影的限制,节点仍然只渲染一次:因为插入点只是在影子主机的子节点时才会重新投影,它们是从未渲染过.而是将阴影树呈现在它们的位置.

是否有可能影子DOM可能做我想要的并且值得测试,或者是否有其他推荐的方法？

Answer 1

Shadow DOM重投影不能做你想要的.

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

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

Firefox有一个实验性功能,其中元素可以用作背景.这是在CSS中使用background: -moz-element(#foo);,其中foo是您要复制的元素的ID.图像是"实时"; 对元素的更改会在用作背景的任何位置反映出来.

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

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