聚合物1.0定制元素使用纸对话-更好的方式来做到这一点？

Question

我有一个自定义元素video-player，它使用paper-dialog。

他们现在是这样的，似乎有点无趣。我有一个外部按钮(它必须是我的设计的外部按钮)，它用以下方式打开：

bob = Polymer.dom(this.root).querySelector('video-player');
bob.querySelector('paper-dialog').open()

<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/google-youtube/google-youtube.html">
<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="video-player">
  <template>
    <paper-dialog>
      <div class="layout horizontal">
        <paper-button dialog-dismiss>
          <paper-icon-button icon="arrow-back"></paper-icon-button>
        </paper-button>
      </div>
      <div style="height: 100%; width: 100%">
        <google-youtube style="height: 100%;"
          video-id="YMWd7QnXY8E"
          rel="1"
          start="5"
          playsinline="0"
          controls="2"
          showinfo="0"
          width="100%"
          height="100%"
          autoplay="1">
        </google-youtube>
      </div>
    </paper-dialog>
  </template>

  <script>
    Polymer({
      is: "video-player"
    });
  </script>
</dom-module>

</paper-dialog>

我无法继承paper-dialog行为(它将是iron-overlay，因为它与特定的paper-dialog元素无关)。

既然这听起来有点烦人，有什么更好的方法吗？

Answer 1

请阅读如下：

1.最后删除的

</paper-dialog>

2.纸制按钮组件

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

资料来源如下：

<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/google-youtube/google-youtube.html">
<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="video-player">
  <template>
    <paper-dialog>
      <div class="layout horizontal">
        <paper-button dialog-dismiss>
          <paper-icon-button icon="arrow-back"></paper-icon-button>
        </paper-button>
      </div>
      <div style="height: 100%; width: 100%">
        <google-youtube style="height: 100%;"
          video-id="YMWd7QnXY8E"
          rel="1"
          start="5"
          playsinline="0"
          controls="2"
          showinfo="0"
          width="100%"
          height="100%"
          autoplay="1">
        </google-youtube>
      </div>
    </paper-dialog>
  </template>

  <script>
    Polymer({
      is: "video-player"
    });
  </script>
</dom-module>