Polymer 为数据使用自定义元素体

我正在考虑实现自定义datagrid，但希望数据作为自定义元素的内容内联提供：

<x-datagrid>
  <row>
    <col>Value 1</col><col>Value 2</col>
  </row>
</x-datagrid>

值1值2

当菜单和选项卡元素在此基础上填充时，您可以清楚地实现这一点……但是这是如何实现的？我已经查看了core下拉菜单的组件源：

---

没有告诉我太多…我还能去哪里看呢？

我可以用

ready

函数中的

Polymer.dom（this）

实现这一点

将子

元素中的数据加载到组件的

数据

属性中的示例：

ready: function() {
  var self = this; // Since "this" gets lost in the forEach
  Polymer.dom(this).querySelectorAll('option').forEach(function(opt) {
    self.push('data', {id: opt.value, text: opt.textContent});
  });
},

其中我的组件看起来像：

<my-component>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</my-component>

选择1
选择2
选择3

请注意，我的组件旨在扩展

，我将重新设计它，以包装一个适当的

，而不是直接使用

元素，但它可以作为概念证明。