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

问题描述

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

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 :

<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行为（绑定，事件，等等。）因为每个分布式节点可能包含整个应用程序。

I need it not only to render that way, but also delegate entire HTML behavior (bindings, events, etc..) as each distributed node may contain entire app.

我尝试追加< content select =：nth-​​child（。 。）> 上的模板元素回调

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);
        });
    });
}

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

But it does not work (probably because content was already distributed).

小提琴

一般来说，我希望实现的是，但没有硬编码类名，并使其适用于可变数量的子节点。

In general what I would like to achieve is something like http://jsbin.com/hegizi/3/edit, but without hard-coding class names, and make it work with variable number of child nodes.

什么是更多，似乎本机不支持：nth-​​child ：

What is more, it seems, that :nth-child is not supported natively: https://github.com/Polymer/polymer/issues/470

推荐答案

组成是Shadow DOM的设计目标。如果该规范错误得到修复，最好的方法是使用< content select =：nth-​​child（...）> in a < template repeat> 。由于您不能（当前）使用：nth-​​child ，您可以使用分布式节点和数据绑定来包装内容：

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());

我正在使用< html-echo> 来自这篇文章：

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

工作演示：

这篇关于如何以编程方式分发（插入）内容节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！