How to distribute (insert) content nodes programmatically

Question

Is there a way to programmatically distribute (insert) content from lightDOM to ShadowDOM?

I would like to wrap every single child node into an element. For example :

Answer 1

Composition is something Shadow DOM is designed for. If that spec bug gets fixed, the best way to do this would be interesting tricks with <content select=":nth-child(...)"> in a <template repeat>. Since you can't (currently) use :nth-child, you could instead use the distributed nodes and data-binding to wrap the content:

<template repeat="{{node in nodes}}">
  <li>
    <html-echo html="{{node.outerHTML}}"></html-echo>
  </li>
</template>
<content id="c" select="*"></content>

nodes is generated from something like:

this.nodes = Array.prototype.slice.call(this.$.c.getDistributedNodes());

I'm using <html-echo> from this post: https://stackoverflow.com/a/22208332/274673

Working demo: http://jsbin.com/mamawugo/2/edit

Answer 2

There is quite old issue at W3C Bugzilla: #18429 - [Shadow]: Specify imperative API for node distribution

But as for now, there is nothing in spec about that.