アプリを Polymer 1 から Polymer 3 に移行しています。 からの Polymer 3 サンプル アプリから始めていpolymer initます。ポリマー 1 のようにmy-app.js(名前を に変更)を再配置すると、選択した鉄のページ コンポーネントが表示されません。main-app.jsmain-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);