2

我正在研究一组 Polymer 元素（在这种特殊情况下为按钮），其中一些应该重复使用相同的 HTML 片段。自定义按钮的结构如下：

...
<link rel="import" href="button-base.html" id="content">
<link rel="import" href="styles.html">
<link rel="import" href="behavior.html">

<dom-module id="dg-button">
  <template>
    <style include="button-styles"></style>
    <!-- HERE I want the content of button-base.html -->
  </template>

  <script>
    Polymer({
      is: 'custom-button',
      behaviors: [DG.ButtonBehavior]
    });
  </script>
</dom-module>

风格和行为应有的作用。

问题是：我不确定如何在button-base.html不定义button-base为另一个元素然后将其用作<button-base></button-base>.

我想避免将其转换为新元素的原因是：

  • 我希望 的内容button-base成为元素本地 DOM 的一等公民，custom-button以便行为中定义的所有方法仍然适用this.myMethod()于不导入的按钮，button-base而是使用自定义本地 DOM。
  • 我需要能够在这个 new 上以声明方式设置属性，custom-button以便它们自动反映在 DOM 元素上button-base.html。

例如 的内容button-base.html如下：

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

<paper-button id="internalButton" raised$="[[raised]]">
  <span id="defaultContent">
    <content></content>
  </span>
</paper-button>

我想以一种自动映射到的方式设置raised我，而无需通过新元素代理所有可能的属性（如果我定义为新元素并将其导入为in ）。custom-buttonpaper-buttonbase-button<base-button></base-button>custom-button

关于如何使这个导入工作的任何想法？

4

0 回答 0