Why can't I see my dynamically added iron-pages element on my webpage?

Question

I'm using the following tutorial : https://vaadin.com/components/vaadin-tabs/html-examples/tabs-advanced-demos

Here is my custom element :

<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>

I am dynamically adding vaadin tabs and subsequent iron pages to my UI. I'm able to successfully render the tabs but cannot get my custom element bps-device-container to show. Here is my bps-device-container element :

<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>

Using Chrome developer tools, I got the following :

Why is the height still 0 even though I've tried changing the dimensions in my style tags? I've tried various things but can't get the pages to show.

Answer 1

Was stuck on this issue for a day and half, turns out it was the attr-for-selected attribute that was causing problems. I removed it for both the vaadin tabs and iron pages and it works fine now.