Polymer 不允許在 Chrome 中設置內部元素樣式和傳播事件

Question

這幾周我開始使用 Polymer。 我正在嘗試創建一個paper-submit元素，其中包括一個按鈕和一個paper-button ，一旦按下，就會觸發隱藏按鈕的點擊事件。

這在 Firefox 中工作正常： paper-button的樣式正確（使用類），點擊事件觸發按鈕的點擊事件，包含表單觸發提交事件。

但是，在 Chrome 上，紙按鈕忽略了我設置的樣式（參見示例：背景顏色沒有變化）並且它似乎停止傳播按鈕的點擊事件。 結果是一個無樣式的紙按鈕，它什么也不會觸發。

這是來源：

CSS 樣式，鏈接在主頁面：

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

紙提交聚合物元素：

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

注意：我已經嘗試在paper-input元素中插入一個簡單的按鈕來測試它是否與 JavaScript 的點擊功能相關，但它不是：相同的結果。

這就是我調用元素的方式：

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

該元素位於具有一些必填字段的表單內：在 Firefox 上它們觸發錯誤，在 Chrome 上沒有任何反應。

你能幫幫我嗎？

Answer 1

還有另一種方法： 聲明性事件映射

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

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

Answer 2

就css而言，如果您在陰影邊界之外，則需要刺穿它們以覆蓋它們...

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

這是一個帶有示例的代碼筆

盡管您在評論中說了些什么，但不確定為什么在這種情況下必須使用新元素。 您應該能夠以任何一種方式進行樣式和表單提交。 我可能只是沒有關於您的項目的背景信息，所以如果我在這方面不正確，我深表歉意。

對於使用“紙質表格”的一些靈感，還可以查看paper-form-on-fire