此元素是脚本/动画的,各种渲染需要保持同步.
>将元素的副本放在多个位置并更新所有元素.这就是我想要避免的.
>将元素的副本放在多个位置.更新其中一个副本,并使用突变事件捕获这些更改并将其重放到其他副本.好像很多工作.
>使用shadow DOM.我对这个替代方案寄予厚望,最初似乎是可能的,使用“插入点”,允许这里的DOM子树虚拟放置在那里的DOM子树中.
我还没有测试过最后一个替代品,即available in Chrome 25. W3C spec说：
One case that deserves special consideration is the situation when an
insertion point is a child node of another shadow host…The effect of a node being
distributed into more than one insertion point is called reprojection.
但是之后…
Despite being distributed to more than one insertion point during
reprojection,a node is still only rendered once,because of the
constraints under which the reprojection occurs: since the insertion
points are only subject to reprojection when they are children of a
shadow host,they are never rendered. Instead the shadow tree is
rendered in their place.
是否有可能影子DOM可能做我想要的并且值得测试,或者是否有其他推荐的方法？
解决方法
我是在Chrome中实施Shadow DOM的团队的一员.规范中的注释是正确的 – Shadow DOM中的内容最多渲染一次.
以下是一些可能有用的想法,具体取决于您要实现的目标：
Firefox有一个实验性功能,其中an element can be used as a background.使用背景连接到CSS：-moz-element(#foo);其中foo是要复制的元素的ID.图像是“实时”;对元素的更改会在用作背景的任何位置反映出来.
使用-moz-element有一些潜在的缺点：它只在某些版本的Firefox中实现;它是实验性的,这意味着该特征可能在某些时候发生变化或消失;并且副本不是交互式的 – 你不能点击那里的按钮,将鼠标悬停在副本上不会触发：悬停样式等等.
如果您希望所有副本都是交互式的,请使用Mutation Observers.包含Mutation Observers的a library called Mutation Summary包含镜像整个页面的an example Chrome extension.您可以调整它以镜像DOM的子树.根据您的应用程序,您还可以使用Mutation Observers以双向镜像DOM.
