I would like to have the "same" HTML element rendered in multiple places on the page. This element is scripted/animated and the various renderings need to stay in sync.
The solutions I have considered include:
- Put copies of the element in multiple places and update all of them. This is what I am trying to avoid.
- Put copies of the element in multiple places. Update one of the copies, and use mutation events to capture those changes and replay them against the other copies. Seems like a lot of work.
- Use shadow DOM. I had high hopes for this alternative, which initially seems to be possible, using "insertion points", which allow a DOM subtree over here to be virtually placed in a DOM subtree over there.
I have not tested this last alternative, which is available in Chrome 25 . The W3C spec says:
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.
But then...
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.
Does it seem likely that shadow DOM likely to do what I want and is worth testing, or is there something other recommended approach?