使用Light DOM和铁列表抛出非法调用错误

Question

我构建了一个<editable-list>元素，允许我在元素的Light DOM中声明一些项目dom-repeat。

出于性能原因，我想使用<iron-list>代替<dom-repeat>。

虽然文档说明<iron-list> does indeed have a Templatize method，但我似乎得到了：

  

非法调用

当我尝试将Light DOM模板化为<iron-list>时

错误。

非工作代码示例（使用<iron-list>）：

＆＃13;

＆＃13;

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="iron-list/iron-list.html" rel="import">

<dom-module id="editable-list">
  <template>
    <content></content>
    <iron-list id="repeater" items="{{data}}"></iron-list>
  </template>
  <script>
    HTMLImports.whenReady(function() {
      "use strict";

      Polymer({

        is: "editable-list",
        
        ready: function() {
          const template = this.querySelector("#items");
          this.$.repeater.templatize(template);
          Polymer.Bind.prepareModel(this.$.repeater);
          Polymer.Base.prepareModelNotifyPath(this.$.repeater);
        }

      });
    });
  </script>
</dom-module>


<dom-module id="user-list">
  <template>
    <editable-list data="{{data}}">
      <template id="items">
        <h4>[[item]]</h4>
      </template>
    </editable-list>
  </template>
  <script>
    HTMLImports.whenReady(function() {
      "use strict";

      Polymer({

        is: "user-list",
        properties: {
         data: {
           type: Array,
           value: ["Foo", "Bar", "Baz"]
         }
        }

      });
    });
  </script>
</dom-module>


<user-list></user-list>

＆＃13;

＆＃13;

＆＃13;

工作代码示例（使用dom-repeat）

＆＃13;

＆＃13;

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">

<dom-module id="editable-list">
  <template>
    <content></content>
    <template is="dom-repeat" id="repeater" items="{{data}}"></template>
  </template>
  <script>
    HTMLImports.whenReady(function() {
      "use strict";

      Polymer({

        is: "editable-list",
        
        ready: function() {
          const template = this.querySelector("#items");
          this.$.repeater.templatize(template);
          Polymer.Bind.prepareModel(this.$.repeater);
          Polymer.Base.prepareModelNotifyPath(this.$.repeater);
        }

      });
    });
  </script>
</dom-module>


<dom-module id="user-list">
  <template>
    <editable-list data="{{data}}">
      <template id="items">
        <h4>[[item]]</h4>
      </template>
    </editable-list>
  </template>
  <script>
    HTMLImports.whenReady(function() {
      "use strict";

      Polymer({

        is: "user-list",
        properties: {
         data: {
           type: Array,
           value: ["Foo", "Bar", "Baz"]
         }
        }

      });
    });
  </script>
</dom-module>


<user-list></user-list>

＆＃13;

＆＃13;

＆＃13;

Answer 1

目前<iron-list>不支持传播Light DOM，至少对于v1。

正在跟踪问题here。