Mirroring HTML elements, using shadow DOM is possible

Question

I would like to have the “same” HTML element that appears in several places on the page. This element is scripted / animated, and different visualizations must be synchronized.

The solutions I reviewed include:

• Place copies of the item in several places and update them all. This is what I am trying to avoid.
• Place copies of the item in several places. Update one of the copies and use the mutation events to commit these changes and play them against other copies. It seems like a lot of work.
• Use shadow DOM. I had high hopes for this alternative, which initially seems possible using "insertion points" that allow the DOM subtree here to actually be located in the DOM subtree.

I have not tested this latest alternative, which is available in Chrome 25 . The W3C specification says:

One case that deserves special attention is when the insertion point is a child node of another shadow host ... The effect of a node distributed over several insertion points is called redrawing.

But then...

Despite the fact that it is distributed over several insertion points during reprocessing, a node is still displayed only once , due to the limitations under which reproduction occurs: since the insertion points are only subject to overexposure when they are children of the shadow owner, they never not displayed. Instead, a shadow tree rendered in their place.

Is it possible that the shadow DOM can do what I want and is worth checking out, or is there something else recommended?

Answer 1

Shadow DOM review does not do what you want.

Im part of a team using the Shadow DOM in Chrome. The comment in the specification is the correct content in the Shadow DOM, which is displayed once no more than once.

Here are a few ideas that may be helpful, depending on what exactly you are trying to achieve:

Firefox has an experimental feature in which an element can be used as a background. This is hooked into CSS using background: -moz-element(#foo); where foo is the identifier of the item you want to copy. The image is "live"; changes to an element are reflected wherever it is used as a background.

Using -moz-element has several potential disadvantages: it is implemented only in some versions of Firefox; it is experimental, which means that the function may change or go away at some point; and the copy is not interactive - you cannot click on the buttons there, hovering over the copy does not cause styles :hover , etc.

If you want all copies to be interactive, use Mutation Observers. There is a library called Mutation Summary , which includes Mutation Observers and includes a Chrome extension example that reflects the entire page. You can adapt it to the mirror of the DOM subtree. Depending on your application, you can also use the Mutation Observer to mirror the DOM in two directions.