聚合物1.0：如何使该自定义元素具有声明性？

Question

最近，我一直在尝试适应Polymer中声明式编程的方式。 我要制作的自定义元素称为Iron-Scroll-Spy

铁滚动间谍演示

有演示代码（demo / index.html） ，如下所示：

<template is="dom-bind" id="scope">

  <paper-header-panel class="flex" id="headerPanel">
    <paper-toolbar>
      <paper-tabs selected="{{scrollSelected}}">
        <paper-tab>Section A</paper-tab>
        <paper-tab>Section B</paper-tab>
        <paper-tab>Section C</paper-tab>
        <paper-tab>Section D</paper-tab>
      </paper-tabs>
    </paper-toolbar>

    <iron-scroll-spy selected="{{scrollSelected}}" id="scrollSpy">
      <div>
        <h1>Section A</h1>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
      </div>
      <div>
        <h1>Section B</h1>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
      </div>
      <div>
        <h1>Section C</h1>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
      </div>
      <div>
        <h1>Section D</h1>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
      </div>
    </iron-scroll-spy>
  </paper-header-panel>

  <script>
    var scope = document.getElementById("scope");
    scope.$.scrollSpy.scrollTarget = scope.$.headerPanel.scroller;
  </script>

</template>

---

但是，如何使声明的代码起作用？

如果我想在那里创建演示页面到我自己的<custom-element> ，我该怎么做？ 举例来说，我想将其设为<scroll-spy-app> 、、、

---

到目前为止，我得到了什么（内容未加载-无法正常工作）：

<dom-module id="scroll-spy-app">
<template>
    <style>
        body { margin: 0; height: 100vh; }
        iron-scroll-spy div { padding: 250px 100px; border-bottom: 1px solid grey; }
    </style>

      <paper-header-panel class="flex" id="headerPanel">
        <paper-toolbar>
          <paper-tabs selected="{{scrollSelected}}">
            <paper-tab>Section A</paper-tab>
            <paper-tab>Section B</paper-tab>
            <paper-tab>Section C</paper-tab>
            <paper-tab>Section D</paper-tab>
          </paper-tabs>
        </paper-toolbar>

        <iron-scroll-spy selected="{{scrollSelected}}" id="scrollSpy">
          <div class="scroll-spy">
            <h1>Section A</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
          <div class="scroll-spy">
            <h1>Section B</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
          <div class="scroll-spy">
            <h1>Section C</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
          <div class="scroll-spy">
            <h1>Section D</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
        </iron-scroll-spy>
      </paper-header-panel>

</template>

<script>
    Polymer({
      is: 'scroll-spy-app',

      properties: {
          scrollSelected: {
              type: Number,
              value: 0
          },
      },

      ready: function() {
        this.$.scrollSpy.scrollTarget = this.$.headerPanel.scroller;
      }
    });
</script>

</dom-module>

Answer 1

gh！...我一直都正确。

下次，我只需要确保css { min-height: 0; } { min-height: 0; }未设置为零 ！

快速解答：（ 小提琴）

<script>
    Polymer({
      is: 'scroll-spy-app',

      ready: function() {
        this.$.scrollSpy.scrollTarget = this.$.headerPanel.scroller;
      }
    });
</script>

声明式方法（完整）：

<!--
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    Scroll Spy 
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->

<!-- Polymer -->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-scroll-spy/iron-scroll-spy.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">



<dom-module id="scroll-spy-app">
<template>
    <style>
        :host {
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -ms-flex-direction: column;
            -webkit-flex-direction: column;
            flex-direction: column;
            position: relative;
            height: 100%;
        }

        paper-header-panel { min-height: 100vh; }
        iron-scroll-spy div { min-height: 50vh; padding: 0 100px; border-bottom: 1px solid grey; }
    </style>

      <paper-header-panel id="headerPanel">

        <paper-toolbar>
          <paper-tabs selected="{{scrollSelected}}">
            <paper-tab>Section A</paper-tab>
            <paper-tab>Section B</paper-tab>
            <paper-tab>Section C</paper-tab>
            <paper-tab>Section D</paper-tab>
          </paper-tabs>
        </paper-toolbar>


        <iron-scroll-spy selected="{{scrollSelected}}" id="scrollSpy">
          <div>
            <h1>Section A</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
          <div>
            <h1>Section B</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
          <div>
            <h1>Section C</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
          <div>
            <h1>Section D</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
        </iron-scroll-spy>

      </paper-header-panel>

</template>

<script>
    Polymer({
      is: 'scroll-spy-app',

      ready: function() {
        this.$.scrollSpy.scrollTarget = this.$.headerPanel.scroller;
      }
    });
</script>

</dom-module>

添加自定义元素：

<scroll-spy-app></scroll-spy-app>