StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Shadow DOM reprojection does not do what you want.</p> <p>I’m part of the team implementing Shadow DOM in Chrome. The commentary in the spec is right—content in Shadow DOM is rendered once at most once.</p> <p>Here are a couple of ideas which might be useful, depending on what exactly you’re trying to achieve:</p> <p>Firefox has an experimental feature where <a href="https://developer.mozilla.org/en-US/docs/CSS/element" rel="noreferrer" title="-moz-element documentation">an element can be used as a background.</a> This is hooked up in CSS using <code>background: -moz-element(#foo);</code> where <em>foo</em> is the ID of the element you want to copy. The image is “live”; changes to the element are reflected everywhere it is used as a background.</p> <p>Using <code>-moz-element</code> has a few potential downsides: It is only implemented in some versions of Firefox; it is experimental, which means the feature might change or go away at some point; and the copy is not interactive—you can’t click on buttons in there, hovering over the copy does not trigger <code>:hover</code> styles, and so on.</p> <p>If you want all of the copies to be interactive, use Mutation Observers. There is <a href="https://code.google.com/p/mutation-summary/" rel="noreferrer" title="Mutation Summary project page">a library called Mutation Summary</a> which wraps Mutation Observers and includes <a href="https://code.google.com/p/mutation-summary/source/browse/#git%2Fexamples%2Fpagemirror_extension%253Fstate%253Dclosed" rel="noreferrer">an example Chrome extension</a> which mirrors an entire page. You could adapt it to mirror a subtree of DOM. Depending on your application you could also use Mutation Observers to mirror the DOM bi-directionally. </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