0
ポリマーウェブサイトを作成していて、メインロジックをindex.htmlからウェブコンポーネントに移動すると、自分のサイトのアーキテクチャがより良いと判断したばかりです。なんらかの理由で、Webコンポーネントでpaper-scroll-header-panelを使用すると何も表示されません。私がそれのためのインポートをコメントアウトすると、物事は再び表示を開始します。元々はすべてindex.htmlだったので、すべてが期待通りに機能しました。ポリマーペーパースクロールヘッダーパネルが表示されない
なぜ今は動作しないのか分かりません。私が間違っていることは何ですか？
新しいindex.html：
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Joyce K. Lee</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="import" href="styles/app-theme.html">
<link rel="import" href="styles/shared-styles.html">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="elements/app.html">
<style is="custom-style" include="shared-styles"></style>
</head>
<body unresolved>
<template is="dom-bind">
<joyce-app></joyce-app>
</template>
<script src="scripts/app.js"></script>
</body>
</html>
新しいapp.html：
<link rel="import" href="../bower_components/polymer/polymer.html">
<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<!-- Paper elements -->
<!-- <link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html"> -->
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<!-- Neon elements -->
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../bower_components/neon-animation/neon-animations.html">
<!-- Firebase -->
<link rel="import" href="../bower_components/firebase-element/firebase-auth.html">
<!-- Routing -->
<link rel="import" href="../bower_components/app-router/app-router.html">
<link rel="import" href="custom-icons.html">
<link rel="import" href="blog.html">
<link rel="import" href="artist.html">
<link rel="import" href="teacher.html">
<link rel="import" href="research.html">
<link rel="import" href="contact.html">
<link rel="import" href="login.html">
<link rel="import" href="simple-overlay.html">
<dom-module id="joyce-app">
<template>
<style>
</style>
<app-router style="display:none;">
<app-route path="/" import="/elements/blog.html"></app-route>
<app-route path="/artist" import="/elements/artist.html"></app-route>
<app-route path="/teacher" import="/elements/teacher.html"></app-route>
<app-route path="/research" import="/elements/research.html"></app-route>
<app-route path="/contact" import="/elements/contact.html"></app-route>
<app-route path="*" import="/elements/blog.html"></app-route>
</app-router>
<!-- Main Area -->
<paper-scroll-header-panel fixed>
<!-- Main Toolbar -->
<paper-toolbar class="medium-tall">
<div class="middle">
<div class="app-name">Joyce K. Lee</div>
<span class="flex"></span>
<paper-icon-button icon="account-circle" onclick="login.open()" hidden?="{{!statusKnown || user}}"></paper-icon-button>
<paper-icon-button icon="account-square" onclick="{{logout}}" hidden?="{{!statusKnown || !user}}"></paper-icon-button>
<template if="{{user}}">{{user.password.username}}</template>
</div>
<!-- Application sub title -->
<div class="bottom-title">
<paper-tabs id="nav" selected="{{selected}}">
<paper-tab><a href="#/"><iron-icon icon="home"></iron-icon></a></paper-tab>
<paper-tab><a href="#/artist"><iron-icon icon="custom-icons:brush"></iron-icon></a></paper-tab>
<paper-tab><a href="#/teacher"><iron-icon icon="custom-icons:apple"></iron-icon></a></paper-tab>
<paper-tab><a href="#/research"><iron-icon icon="custom-icons:book"></iron-icon></a></paper-tab>
<paper-tab><a href="#/contact"><iron-icon icon="mail"></iron-icon></a></paper-tab>
</paper-tabs>
</div>
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<neon-animated-pages style="height:100%" id="pages" class="flex" selected="{{selected}}" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
<neon-animatable><joyce-blog></joyce-blog></neon-animatable>
<neon-animatable><joyce-artist></joyce-artist></neon-animatable>
<neon-animatable><joyce-teacher></joyce-teacher></neon-animatable>
<neon-animatable><joyce-research></joyce-research></neon-animatable>
<neon-animatable><joyce-contact></joyce-contact></neon-animatable>
</neon-animated-pages>
</div>
<simple-overlay id="login" with-backdrop>
<joyce-login></joyce-login>
</simple-overlay>
</paper-scroll-header-panel>
</template>
<script>
(function() {
Polymer({
is: 'joyce-app'
});
})();
</script>
</dom-module>
元index.html：
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Joyce K. Lee">
<title>Joyce K. Lee</title>
<!-- Place favicon.ico in the `app/` directory -->
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#00bcd4">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Tile color for Win8 -->
<meta name="msapplication-TileColor" content="#00bcd4">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PSK">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- endbuild -->
<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<!-- endreplace-->
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
</head>
<body unresolved class="fullbleed layout vertical">
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<app-router style="display:none;">
<app-route path="/" import="/elements/joyce-blog.html"></app-route>
<app-route path="/artist" import="/elements/joyce-artist.html"></app-route>
<app-route path="/teacher" import="/elements/joyce-teacher.html"></app-route>
<app-route path="/research" import="/elements/joyce-research.html"></app-route>
<app-route path="/contact" import="/elements/joyce-contact.html"></app-route>
<app-route path="*" import="/elements/joyce-blog.html"></app-route>
</app-router>
<!-- Main Area -->
<paper-scroll-header-panel main condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="medium-tall">
<div class="center horizontal layout fit">
<div class="app-name">Joyce K. Lee</div>
<span class="flex"></span>
<paper-icon-button icon="account-circle" onclick="login.open()" hidden?="{{!statusKnown || user}}"></paper-icon-button>
<paper-icon-button icon="account-square" onclick="{{logout}}" hidden?="{{!statusKnown || !user}}"></paper-icon-button>
<template if="{{user}}">{{user.password.username}}</template>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container center layout flex fit">
<div class="bottom-title paper-font-subhead">
<paper-tabs id="nav" selected="{{selected}}">
<paper-tab><a href="#/"><iron-icon icon="home"></iron-icon></a></paper-tab>
<paper-tab><a href="#/artist"><iron-icon icon="image:brush"></iron-icon></a></paper-tab>
<paper-tab><a href="#/teacher"><iron-icon icon="maps:place"></iron-icon></a></paper-tab>
<paper-tab><a href="#/research"><iron-icon icon="work"></iron-icon></a></paper-tab>
<paper-tab><a href="#/contact"><iron-icon icon="mail"></iron-icon></a></paper-tab>
</paper-tabs>
</div>
</div>
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<neon-animated-pages style="height:100%" id="pages" class="flex" selected="{{selected}}" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
<neon-animatable><joyce-blog></joyce-blog></neon-animatable>
<neon-animatable><joyce-artist></joyce-artist></neon-animatable>
<neon-animatable><joyce-teacher></joyce-teacher></neon-animatable>
<neon-animatable><joyce-research></joyce-research></neon-animatable>
<neon-animatable><joyce-contact></joyce-contact></neon-animatable>
</neon-animated-pages>
</div>
<simple-overlay id="login" with-backdrop>
<joyce-login></joyce-login>
</simple-overlay>
</paper-scroll-header-panel>
<!-- Uncomment next block to enable Service Worker support (1/2) -->
<paper-toast id="caching-complete" duration="6000" text="Caching complete! This app will work offline."></paper-toast>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope.selected = 0;
</script>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
CSSで 'paper-scroll-header-panel'の親の高さを指定しましたか？ –