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>

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

我尝试将<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);
        });
    });
}

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

小提琴here

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

此外，似乎:nth-child本身不支持：https://github.com/Polymer/polymer/issues/470

Answer 1

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

<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

Answer 2

W3C Bugzilla有一个很老的问题：#18429 - [Shadow]: Specify imperative API for node distribution

但就目前而言，没有任何规范。

如何以编程方式分发（插入）内容节点

2 个答案: