javascript - Polymer 是否支持带有破折号的属性和属性？

Question

我可以使用以下 html制作一个Polymer复选框：

<polymer-element name="role-checkbox1" attributes="ariachecked" on-click="{{clickHandler}}">
    <template>
        <style>
            :host::after {
                font-size: 100px;
                display: inline-block;
                border: 1px solid black;
                content: '+';
                width: 1em;
                height: 1em;
            }
            :host[ariachecked]::after {
                content: 'x';
            }
        </style>
    </template>
    <script>
    Polymer('role-checkbox1', {
        ariachecked: false,
        clickHandler: function() {
            this.ariachecked = !this.ariachecked;
        }
    });
    </script>
</polymer-element>

以下是完全相同的，只是ariachecked现在是aria-checked并且role-checkbox1不是 role-checkbox2。这似乎不起作用。有没有办法可以使用aria-checked属性？我可以将此属性绑定到另一个命名属性吗？

<polymer-element name="role-checkbox2" attributes="aria-checked" on-click="{{clickHandler}}">
    <template>
        <style>
            :host::after {
                font-size: 100px;
                display: inline-block;
                border: 1px solid black;
                content: '+';
                width: 1em;
                height: 1em;
            }
            :host[aria-checked]::after {
                content: 'x';
            }
        </style>
    </template>
    <script>
    Polymer('role-checkbox2', {
        'aria-checked': false,
        clickHandler: function() {
            this['aria-checked'] = !this['aria-checked'];
        }
    });
    </script>
</polymer-element>

工作示例（单击两个框，只有左边的一个在工作）

Answer 1

目前不支持将虚线属性转换为驼峰式大小写。 https://github.com/Polymer/polymer/issues/193#issuecomment-40162114

看起来你已经在这个上面找到了 Github 线程 :)

我想你需要做这样的事情：

<polymer-element name="role-checkbox1" attributes="checked" on-click="{{clickHandler}}">
  <template>
    :host[checked]::after {
      content:'x';
    }
    </style>
  </template>
  <script>
  Polymer('role-checkbox1', {
    checked: false,
    clickHandler: function() {
      this.checked = !this.checked;
      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
    }
  });
  </script>
</polymer-element>

http://jsbin.com/dukeq/3/edit

Answer 2

在聚合物 1.0 中，现在将虚线属性转换为驼峰式属性是默认行为。