Question

我正在尝试创建一个在paper-dialog中播放YouTube视频的自定义元素。因此，videoPlayer = Polymer.dom(this.root).querySelector('video-player');继承/有权访问paper-dialog open方法，我正在尝试扩展自定义元素。它不起作用，但希望我走在正确的轨道上，有人可以正确地告诉我。

我正在使用Polymer 1.0，但我只有https://www.polymer-project.org/0.5/docs/polymer/polymer.html#extending-other-elements来扩展元素。

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

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

<paper-dialog name="video-player" extends="video-player">
  <template>
    <shadow></shadow>
  </template>
  <script>
     Polymer();
  </script>
</paper-dialog>

<video-player></video-player>

Answer 1

正如评论中所提到的，您无法扩展自定义元素，因此现有模式（或至少我使用的模式）是尽可能利用行为和包装好的地方。

e.g。

<dom-module id="popup-video-player">
  <template>
    <video-player></video-player>
  </template>
  <script>
    Polymer({
      is: 'popup-video-player',
      behaviors: [Polymer.PaperDialogBehavior],
      ...
    });
  </script>
</dom-module>

现在您可以像<popup-video-player>一样使用paper-dialog。

我知道它很糟糕，因为如果video-player有一堆你想要访问的属性，你必须在popup-video-player元素的API中复制它们，这不是完全干的。

如果你看paper-input source，你会看到他们做同样的事情。显而易见的是，他们希望延长iron-input，但他们无法做到这样的事情：

  <input is="iron-input" id="input"
    aria-labelledby$="[[_ariaLabelledBy]]"
    aria-describedby$="[[_ariaDescribedBy]]"
    disabled$="[[disabled]]"
    title$="[[title]]"
    ... >

作为旁注，您可以随时加入<video-player> s＆＃34;属性＆＃34;属性并以编程方式添加API。

也许这样的事情会起作用:(未经测试！）

Polymer({
  ...
  properties: (function () {
    var prop = {
      //special properties specific to the pop up version of video-player
      //..obviously be careful to avoid name space conflicts.
    };
    var video_player = document.createElement('video-player');
    video_player.properties.keys().forEach( function(key) {
      props[key] = video_player[key];
    });
    return props;
  }()),

});

Polymer 1.0扩展元素 - 带有自定义元素的纸张对话框

1 个答案: