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 に答える