dart - 扩展PaperDialog并通过Dart调用toggle()

Question

我正在尝试扩展PaperDialog，以便对其进行样式设置。我正在尝试使用this solution的方法3，但使用Dart而不是JS。这是我的组件。

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">

<polymer-element name="hc-dialog" extends="paper-dialog" noscript>
  <template>
    <link href="hc-dialog.css" rel="stylesheet" type="text/css" />

    <shadow></shadow>
  </template>
</polymer-element>

该组件似乎可以正确呈现到DOM中-我可以通过向组件添加opens =“true”来验证其功能是否正常-例如，这可以很好地呈现:

<hc-dialog opened="true" closeSelector="[dismissive]" transition="paper-dialog-transition-bottom">
  <div layout horizontal>
    <span flex></span>
    <paper-button raised dismissive>Done</paper-button>
  </div>
</hc-dialog>

但是我不希望它自动显示，而当试图找到一种通过Dart在此组件上调用toggle()的方法时，问题就来了。在上面链接的解决方案( working JS Fiddle)中，它是通过JS调用的:

<script>
  Polymer('x-dialog-3', {
    toggle: function() {
      this.$.dialog3.toggle();
    }
  });
</script>

但是，如果我尝试在dart中实现相同的目的，则无法检索到具有toggle()方法的组件:

shadowRoot.querySelector('hc-dialog').toggle();

结果为Object.noSuchMethod。通过反射检查返回的对象很清楚:

var he = shadowRoot.querySelector('hc-dialog');
var cm = reflect(he).type;

while (cm != null) {
   print(cm);
   cm = cm.superclass;
}

给出:

ClassMirror on 'HtmlElement' (:1)
ClassMirror on 'Element' (:1)
ClassMirror on 'Node' (:1)
ClassMirror on 'EventTarget' (:1)
ClassMirror on 'NativeFieldWrapperClass2' (:1)
ClassMirror on 'Object' (:1)

==>我的对话框不是PaperDialog / CoreOverlay，这就是为什么我不能在其上调用toggle()的原因。

这种方法有什么问题？我该如何获得可以调用toggle()的功能？

Answer 1

Polymer.dart核心元素和纸质元素只是Polymer.js元素的包装。这些类型的元素不支持扩展，因为Dart类无法扩展JS类。