Polymer 聚合物纸卷轴头面板不'；t显示
我正在写一个polymer网站，最近我决定如果我把我的主要逻辑从Polymer 聚合物纸卷轴头面板不'；t显示,polymer,web-component,Polymer,Web Component,我正在写一个polymer网站，最近我决定如果我把我的主要逻辑从index.html移到一个web组件中，我的网站的架构会更好。由于某些原因，在web组件中，当我使用纸张滚动标题面板时，没有显示任何内容。当我注释掉它的导入时，事情又开始显示了。当一切最初都在index.html中时，一切都按预期工作 <head> <meta charset="utf-8"> <meta name="description" content=""> <meta
index.html纸张滚动标题面板时，没有显示任何内容。当我注释掉它的导入时，事情又开始显示了。当一切最初都在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>
我不明白为什么现在不行。你知道我做错了什么吗
<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>
新建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>
<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>
<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>
原始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>
乔伊斯·K·李
var scope=document.querySelector（'template[is=“dom bind”]”）；
scope.selected=0；
终于解决了这个问题！看起来我的应用程序主题.html
中的样式仅应用于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
文件中，并将其导入到您想要使用该主题的每个自定义元素中。您是否为css中的纸张滚动头面板
父元素指定了高度？
<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>