Polymer：可以在 select（原生或扩展）标签内添加 <content> 吗？

Question

我想扩展原生的 select 标签功能（不，"paper-dropdown-menu" 组件不适合我）。

我有一个带有 <select> 标签的自定义元素，我在其内容中用 <options> 调用该元素。

这是元素的示例：

<dom-module id="my-select">
<template>
  <select id="select"
    disabled$="[[disabled]]"
    required$="[[required]]"
    autofocus$="[[autofocus]]"
    name$="[[name]]"
    size$="[[size]]"
    multiple$="[[multiple]]">
      <content></content>
  </select>
</template>
<script>
Polymer({
  is: 'my-select'
});
</script>
</dom-module>

我用以下方式调用元素：

<my-select>
  <option value="1">1</option>
  <option value="1">1</option>
</my-select>

这样 select 标签就不会显示任何选项（它不会添加内容）。

我也试过扩展 select 标签：

<dom-module id="my-select">
<template>
  <select is="iron-select" id="select"
    disabled$="[[disabled]]"
    required$="[[required]]"
    autofocus$="[[autofocus]]"
    name$="[[name]]"
    size$="[[size]]"
    multiple$="[[multiple]]">
      <content></content>
  </select>
</template>
<script>
Polymer({
  is: 'my-select'
});
</script>
</dom-module>

与 "iron-select":

<link rel="import" href="../polymer/polymer.html">
<script>
  Polymer({
    is: 'iron-select',
    extends: 'select'
  });
</script>

但它也不起作用。

我是不是忘记了什么，或者这是不可能的事情（我必须创建一个全新的 select 组件，而没有原生 select 标签）？

Answer 1

您忘记了，或者至少没有向我们展示您绑定到 select 的属性的定义！但是最好的选择，就像你提到的那样，是扩展 select:

<dom-module id="my-select">
    <script>
        Polymer({
            is: 'my-select',
            extends: 'select'
            // add your stuff here...
        });
    </script>
</dom-module>

并像这样使用它：

<select is="my-select">
    <option value="1">1</option>
    <option value="2">2</option>
<select>

工作正常JSBIN example

Polymer：可以在 select（原生或扩展）标签内添加 <content> 吗？

Polymer: is possible to add <content> inside a select (native or extended) tag?

polymer

html-select

polymer-1.0