Styling native input in Polymer 2.x?

问题:

I am trying to implement this answer.

Is there any way to bind an on-click or on-tap event of a <paper-button> to either of the following hidden input elements?

my-form.html

<iron-form>
  <form>
    ...
    <my-buttons></my-buttons>
    ...
    <input hidden type="reset">
    <input hidden type="submit">
  </form>
<iron-form>

Or to trigger those events in any way? i.e., I have dispatched an event from my <paper-button> as follows

my-buttons.html

<paper-button on-tap="_reset">Reset</paper-button>
<paper-button on-tap="_save">Save</paper-button>

<script>
  _reset() {
    // dispatchEvent...
  }
  _save() {
    // dispatchEvent...
  }
</script>

I want to give pretty (Material Design) styling to the buttons I display to the user of my <iron-form>.

I am also watching @notwaldorf's (Monica D's) tutorial here.

回答1:

You don't really need those hidden inputs, as <iron-form> provides an API for the equivalent events. Namely, <iron-form>.submit() and <iron-form>.reset():

// <iron-form id="form">

_reset() {
  this.$.form.reset();
}

_submit() {
  this.$.form.submit();
}

demo