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

Question

我可以做一个Polymer使用以下 html 的复选框:

<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 属性吗？我可以将此属性绑定(bind)到另一个命名属性吗？

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

Working Example (点击两个框，只有左边一个有效)

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