Shadow DOM reprojection does not do what you want.
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.
Here are a couple of ideas which might be useful, depending on what exactly you’re trying to achieve:
Firefox has an experimental feature where an element can be used as a background. This is hooked up in CSS using background: -moz-element(#foo);
where foo 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.
Using -moz-element
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 :hover
styles, and so on.
If you want all of the copies to be interactive, use Mutation Observers. There is a library called Mutation Summary which wraps Mutation Observers and includes an example Chrome extension 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.