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

Question

I would to extend the native select tag functionalities (no, the "paper-dropdown-menu" component is not good for me).

I have a custom element with <select> tag and I call the element with <options> in its content.

This is an example of the element:

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

and I call the element with:

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

In this way the select tag don't show any options (it doesn't add the content).

I've tried also extending the select tag:

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

with "iron-select":

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

but it doesn't works too.

Did I forget something or this is a thing that is not possible to do (and I must create a brand new select component without the native select tag)?

Answer 1

You forgot, or at least didn't show us the definitions of the properties that you bind to your select! But the best option, like you mentioned is to extend a select:

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

and use it like this:

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

With a working JSBIN example