将 Light DOM 与 iron-list 一起使用会引发非法调用错误

Question

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

出于性能原因，我想使用 <iron-list> 而不是 <dom-repeat>。

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

Illegal Invocation

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

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

<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>

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

<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>

Answer 1

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

正在跟踪问题 here。

将 Light DOM 与 iron-list 一起使用会引发非法调用错误

Using Light DOM with iron-list throws Illegal Invocation error

polymer

polymer-1.0

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

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

将 Light DOM 与 iron-list 一起使用会引发非法调用错误

Using Light DOM with iron-list throws Illegal Invocation error

polymer

polymer-1.0

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

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

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

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