2

有没有办法以编程方式将内容从 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);
        });
    });
}

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

在这里提琴

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

更重要的是，似乎:nth-child本机不支持：https ://github.com/Polymer/polymer/issues/470

4

2 回答 2

2

组合是 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

于 2014-04-10T18:04:12.693 回答
0

W3C Bugzilla 上有一个相当老的问题：#18429 - [Shadow]：为节点分发指定命令式 API

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

于 2014-08-12T20:10:16.320 回答