CODEWITHSUNDEEP
javascriptcssgoogle-chromepolymerdom-events
Jack
Jack

Reputation: 1769

Polymer doesn't allow to style inner elements and propagate events in Chrome

I've started using Polymer in these weeks. I'm attempting to create a paper-submit element which includes a button and a paper-button, which, once pressed, triggers a hidden button's click event.

This works fine in Firefox: the paper-button gets styled correctly (using a class) and the click event triggers the button's click event and the containing form triggers the submit one.

On Chrome though, the paper-button ignores the style I've set (see example: no background color change) and it seems to stop propagating the button's click event. The result is an unstyled paper-button which triggers nothing.

This is the source:

CSS style, linked in the main page:

paper-button.blue {
  color: #FFFFFF;
  background-color: #2196F3; }

paper-submit polymer element:

<link href="../polymer/polymer.html" rel="import">
<link href="../paper-button/paper-button.html" rel="import">

<polymer-element name="paper-submit" attributes="bClass raised recenteringTouch fill" role="button">
  <template>
    <style>
      #submit-button {
        display: none;
      }
    </style>
    <paper-button id="button" class="{{bClass}}" raised="{{raised}}" recenteringTouch="{{recenteringTouch}}" role="button">
      <content></content>
    </paper-button>

    <button type="submit" id="submit-button"></button>
  </template>
  <script>
    Polymer({
      publish: {
        bClass: '',
        raised: false,
        recenteringTouch: false,
        fill: true
      },

      ready: function () {
        var submit = this.$['submit-button'];
        var button = this.$.button;
        button.addEventListener('click', function (ev) {
          submit.click();
        });
      }
    });
  </script>
</polymer-element>

Note: I've tried inserting a simple button inside the paper-input element to test if it was something related to the JavaScript's click function, but it's not: same result.

This is how I call the element:

<paper-submit bClass="blue" role="button" tabindex="0">Click me!</paper-submit>

The element is inside a form with some mandatory fields: on Firefox they trigger the error, on Chrome nothing happens.

May you please help me?

Upvotes: 1

Views: 326

Answers (2)

Erik Isaksen
Erik Isaksen

Reputation: 226

As far as the css goes, if you are outside the shadow boundaries, you need to pierce them to override them...

body /deep/ paper-button {
  ...
}

Here is a codepen with an example

Not sure why you have to use a new element in this case despite what you said in the comments. You should be able to do the styling & form submit either way. I probably just don't have context on your project so I apologize if I am not correct in this.

For some inspiration using 'paper forms' also check out paper-form-on-fire

Upvotes: 1

Goce Ribeski
Goce Ribeski

Reputation: 1372

There is another approach: Declarative event mapping 

<paper-button id="button" on-click="{{click_submit}}" ...

  click_submit: function () {
    var submit = this.$['submit-button'];
      submit.click();
  }

Upvotes: 1

Related Questions