javascript - 如何以编程方式分发(插入)内容节点

Question

有没有办法以编程方式将内容从 lightDOM 分发(插入)到 ShadowDOM？

我想将每个子节点包装到一个元素中。例如:

<my-list>
  <span>first element</span>
  <div>second element</div>
  <a>third element</a>
</my-link>

分发为

<my-list>
  <ul>
    <li>
      <span>first element</span>
    </li>
    <li>
      <div>second element</div>
    </li>
    <li>
      <a>third element</a>
    </li>
  </ul>
</my-link>

我不仅需要它以这种方式呈现，还需要它委托(delegate)整个 HTML 行为(绑定(bind)、事件等)，因为每个分布式节点可能包含整个应用程序。

我试过附加 <content select=":nth-child(..)"> attached 上模板的元素回调

attached: function(){
    //ensure any element upgrades have been processed
    this.async(function asyncAttached(){
        var list = this.$.container;
        this.children.array().forEach(function(child, childNo){
            var li = document.createElement("LI");
            console.log(list, li, child);
            li.innerHTML = '<content select=":nth-child('+childNo+')"></content>';
            list.appendChild(li);
        });
    });
}

但它不起作用(可能是因为内容已经分发)。

fiddle here

一般来说，我想要实现的是 http://jsbin.com/hegizi/3/edit ，但没有硬编码类名，并使其适用于可变数量的子节点。

而且，似乎:nth-child native 不支持:https://github.com/Polymer/polymer/issues/470

Answer 1

组合是 Shadow DOM 的设计目标。如果该规范错误得到修复，那么最好的方法就是使用 <content select=":nth-child(...)"> 的有趣技巧。在<template repeat> .因为你不能(目前)使用 :nth-child ，您可以改用分布式节点和数据绑定(bind)来包装内容:

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

nodes由类似的东西生成:

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

我正在使用 <html-echo>来自这篇文章:https://stackoverflow.com/a/22208332/274673

工作演示:http://jsbin.com/mamawugo/2/edit