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标签页和铁页标签，现在可以正常使用了。

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

1 个答案: