polymer 3 升级 - 选择的铁页在 dom 中但不显示

Question

我正在将我的应用程序从 Polymer 1 迁移到 Polymer 3。我开始使用来自 polymer init 的 Polymer 3 示例应用程序.当我重新安排 my-app.js (重命名为 main-app.js)就像我的 polymer 1 main-app.html ，选择的铁页组件不显示。

例如，对于 view one我可以看到它已加载并在 DOM 中，但它不会显示。任何想法为什么？我认为应用程序元素 api/behavior 没有改变。

% cat main-app.js 
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { setPassiveTouchGestures, setRootPath } from '@polymer/polymer/lib/utils/settings.js';
import '@polymer/app-layout/app-drawer/app-drawer.js';
import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js';
import '@polymer/app-layout/app-header/app-header.js';
import '@polymer/app-layout/app-header-layout/app-header-layout.js';
import '@polymer/app-layout/app-scroll-effects/app-scroll-effects.js';
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
import '@polymer/app-route/app-location.js';
import '@polymer/app-route/app-route.js';
import '@polymer/iron-pages/iron-pages.js';
import '@polymer/iron-selector/iron-selector.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import './my-icons.js';

// Gesture events like tap and track generated from touch will not be
// preventable, allowing for better scrolling performance.
setPassiveTouchGestures(true);

// Set Polymer's root path to the same value we passed to our service worker
// in `index.html`.
setRootPath(MainAppGlobals.rootPath);

class MainApp extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          --app-primary: var(--paper-indigo-500);
          --app-secondary-color: black;
          --iron-selector-background-color: #fff;
          --iron-selected: #c5cae9;
          --menu-link-color: #111111;
          --drawer-toolbar-border-color: 1px solid rgba(0, 0, 0, 0.22);
          --drawer-menu-color: #ffffff;
          --primary-text: rgba(255, 255, 255, .89);
          --secondary-text-color: #737373;
          --v-border: rgba(127, 127, 127, .62);
          --button-text: rgba(0,0,0, .87);
          --orange-text: rgb(255, 87, 34);
          --invalid: #ff0076;
          -icon-color: #616161;
          --focus-text: rgba(0,0,0, 0.87);
          --focus-label: rgba(63, 81, 181, 0.87);
          display: block;
        }

        iron-pages {
          height: 100%;
        }

        app-header {
          color: #fff;
          background-color: var(--app-primary);
        }
        app-header paper-icon-button {
          --paper-icon-button-ink-color: white;
        }

        .app-name {
          margin-left: 20px;
          font-size: 24px;
          font-weight: 300;
        }

        app-drawer {
          border-right: 1px solid var(--v-border);
        }

        .drawer-list a {
          @apply(--layout-horizontal);
          @apply(--layout-center);
          line-height: 40px;
          text-decoration: none;
          color: var(--menu-link-color);
          font-family: 'Roboto', 'Noto', sans-serif;
          -webkit-font-smoothing: antialiased;
          text-rendering: optimizeLegibility;
          font-size: 14px;
          font-weight: 400;
          line-height: 24px;
          min-height: 48px;
          padding: 0 16px;
        }

        .drawer-list a.iron-selected {
          color: var(--app-primary);
          background: var(--iron-selected);
        }

        .left-bar-container {
          height: 100%;
          overflow: auto;
          margin-top: 64px;
          color: var(--secondary-text-color);
          background-color: var(--drawer-menu-color);
        }

        .toolbar-drawer {
          border-bottom: var(--drawer-toolbar-border-color);
          @apply(--paper-font-title);
        }

        .spacer-line {
          border-bottom: 1px solid rgba(0, 0, 0, 0.22);
          padding: 10px 0 10px 0;
        }

        a > iron-icon {
          margin-right: 33px;
          color: var(--icon-color);
        }

        .close {
          color: #eeff41;
          text-transform: none;
        }
      </style>

      <app-location route="{{route}}" url-space-regex="^[[rootPath]]">
      </app-location>

      <app-route route="{{route}}" pattern="[[rootPath]]:page" data="{{routeData}}" tail="{{subroute}}">
      </app-route>

      <app-header-layout has-scrolling-region="">
        <app-header fixed effects="waterfall" slot="header" condenses="" reveals="" effects="waterfall">

          <app-toolbar>
            <paper-icon-button icon="menu" on-tap="_drawerToggle"></paper-icon-button>
            <div main-title class="app-name">Dolphin</div>
          </app-toolbar>

        </app-header>

        <app-drawer-layout fullbleed="">
          <!-- Drawer Sections -->
          <app-drawer id="drawer" no-focus-trap="false" slot="drawer" swipe-open="[[narrow]]">
            <div class='left-bar-container'>
              <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
                <a name="view1" href="[[rootPath]]view1">View One</a>
                <a name="view2" href="[[rootPath]]view2">View Two</a>
                <a name="view3" href="[[rootPath]]view3">View Three</a>
              </iron-selector>
            </div>

          </app-drawer>

          <!-- Main content -->
          <iron-pages selected="[[page]]" attr-for-selected="name" role="main">
            <my-view1 name="view1"></my-view1>
            <my-view2 name="view2"></my-view2>
            <my-view3 name="view3"></my-view3>
            <my-view404 name="view404"></my-view404>
          </iron-pages>

        </app-drawer-layout>
      </app-header-layout>
    `;
  }

  static get properties() {
    return {
      page: {
        type: String,
        reflectToAttribute: true,
        observer: '_pageChanged'
      },
      routeData: Object,
      subroute: Object
    };
  }

  static get observers() {
    return [
      '_routePageChanged(routeData.page)'
    ];
  }

  _routePageChanged(page) {
     // Show the corresponding page according to the route.
     //
     // If no page was found in the route data, page will be an empty string.
     // Show 'view1' in that case. And if the page doesn't exist, show 'view404'.
    if (!page) {
      this.page = 'view1';
    } else if (['view1', 'view2', 'view3'].indexOf(page) !== -1) {
      this.page = page;
    } else {
      this.page = 'view404';
    }

    // Close a non-persistent drawer when the page & route are changed.
    if (!this.$.drawer.persistent) {
      this.$.drawer.close();
    }
  }

  _pageChanged(page) {
    // Import the page component on demand.
    //
    // Note: `polymer build` doesn't like string concatenation in the import
    // statement, so break it up.
    switch (page) {
      case 'view1':
        import('./my-view1.js');
        break;
      case 'view2':
        import('./my-view2.js');
        break;
      case 'view3':
        import('./my-view3.js');
        break;
      case 'view404':
        import('./my-view404.js');
        break;
    }
  }
}

window.customElements.define('main-app', MainApp);

Answer 1

我想通了....main-app没有高度。我的应用程序中 Polymer 1 和 Polymer 3 之间的区别在于用于样式的 shadow dom 封装。