Databases
StackOverflow2013
Postsdbo
POMirroring HTML elements, possibly using shadow DOM
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMirroring HTML elements, possibly using shadow DOM
    text
    copied!<p>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.</p> <p>The solutions I have considered include:</p> <ol> <li>Put copies of the element in multiple places and update all of them. This is what I am trying to avoid.</li> <li>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.</li> <li>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. </li> </ol> <p>I have not tested this last alternative, which is <a href="http://blog.chromium.org/2013/01/content-security-policy-and-shadow-dom.html">available in Chrome 25</a> . The <a href="https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/">W3C spec</a> says:</p> <blockquote> <p>One case that deserves special consideration is the situation when an insertion point is a child node of another shadow host...The effect of <strong>a node being distributed into more than one insertion point</strong> is called reprojection.</p> </blockquote> <p>But then...</p> <blockquote> <p>Despite being distributed to more than one insertion point during reprojection, <strong>a node is still only rendered once</strong>, 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.</p> </blockquote> <p>Does it seem likely that shadow DOM likely to do what I want and is worth testing, or is there something other recommended approach?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload