javascript - 为什么我在我的网页上看不到我动态添加的 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>

我正在向我的 UI 动态添加 vaadin 选项卡和后续的铁页。我能够成功呈现选项卡，但无法显示我的自定义元素 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 选项卡和铁页删除了它，现在它工作正常。