为什么我在网页上看不到动态添加的iron-pages元素？

Question

我正在使用以下教程：https://vaadin.com/components/vaadin-tabs/html-examples/tabs-advanced-demos

下面是我的自定义元素：

<dom-module id="bps-devices-tabs-container">
  <template>
    <style>
      .flex {
        width: 100%;
        height : 100%;
      }
      .device-container {
        display: flex;
        flex-direction: column;
      }
      .ip {
        height : 70vh;
        overflow: auto;
      }
    </style>

    <div>
      <vaadin-tabs id="tabs" selected={{deviceType}} attr-for-selected="name" role="navigation"></vaadin-tabs>

      <div class="flex">
        <iron-pages class="ip"
          id="pages"
          selected="[[deviceType]]"
          attr-for-selected="name"
          role="main">
        </iron-pages>
      </div>

    </div>


  </template>
  <script>
    class BpsDevicesTabsContainer extends Polymer.Element {
      static get is() { return 'bps-devices-tabs-container'; }

      static get properties() {
        return {
          deviceTitles : {
            type : Array
          },
          deviceData : {
            type : Array
          },
          deviceType: {
            type: String
          }
        }
      }

      connectedCallback(){
        super.connectedCallback();

        this._renderTabs();
      }

      _renderTabs(){
        console.log("render device tabs");
        var tabs = this.$.tabs;
        var pages = this.$.pages;
        var i;

        for(i = 0;i < this.deviceTitles.length;i++){
          var name = this.deviceTitles[i].toUpperCase();
          var tab = document.createElement('vaadin-tab');
          Polymer.dom(tab).setAttribute('name', name);
          Polymer.dom(tab).innerHTML = name;

          var page = document.createElement('bps-device-container');
          page.data = this.deviceData[i];
          Polymer.dom(page).setAttribute('id', name + 'tab');
          Polymer.dom(page).setAttribute('name',name);
          Polymer.dom(page).setAttribute('class','device-container');

          tabs.appendChild(tab);
          pages.appendChild(page);
        }
      }

    }
    customElements.define(BpsDevicesTabsContainer.is, BpsDevicesTabsContainer);
  </script>
</dom-module>

我正在动态添加vaadin标签和后续的iron页面到我的UI中。我可以成功地呈现选项卡，但是不能显示我的自定义元素bps-device-container。下面是我的bps-device-container元素：

<dom-module id="bps-device-container">
  <template>
    <style></style>
    <h1>Testing Device Container</h1>
  </template>
  <script>
    class BpsDeviceContainer extends Polymer.Element {
      static get is() { return 'bps-device-container'; }

      static get properties() {
        return {
          data : {
            type : Object
          }
        }
      }

      connectedCallback(){
        super.connectedCallback();
        console.log(this.data);
      }

    }
    customElements.define(BpsDeviceContainer.is, BpsDeviceContainer);
  </script>
</dom-module>

使用Chrome开发人员工具，我得到了以下内容：

​

​

为什么即使我尝试更改样式标签中的尺寸，高度仍然为0？我试过各种方法，但都不能显示页面。

Answer 1

在这个问题上被卡住了一天半，结果是attr- for -selected属性导致了问题。我在vaadin标签页和iron页面上都去掉了它，现在它工作得很好。