Iron input not compatible with other elements inside

[AlexHenkel]

<iron-input> might be used as a semantic container itself in a case where we want to place other elements inside, and not depending on having an <input> as a first node child. This will avoid having <div> elements to wrap all the content.

Ex. Having an <input> with an <iron-icon> to produce something like this, with all the superpowers of <iron-input>:

As we are already using <iron-input> as a container for <input>, it will be nice to allow us to do something like this:

<iron-input bind-value="{{value}}">
  <template is="dom-if" if=[[icon]]>
    <iron-icon icon="[[iconName]]" class="icon"></iron-icon>
  </template>
  <input type$="[[type]]" pattern$="[[pattern]]" required$="[[required]]">
</iron-input>

If we do that right now, we get the following error when trying to use the validate method, as this.inputElement is not an <input>:

Uncaught TypeError: this.inputElement.checkValidity is not a function

Otherwise to get this done, we need to wrap <iron-input> and <iron-icon> inside a useless <div>, which is an anti pattern, or just make sure that the <input> is always the first child, but I think that should not be required.

[notwaldorf]

iron-input is meant to be a direct replacement of the v1 <input is="iron-input">. As a result, I do not think that this wrapper should be allowed to contain other elements inside of it (and, a lot of the code relies on this assumption). Not exactly sure what benefit this would provide, either.