我有一个带有内联元素的页面，因为我升级到Polymer 2.0后不再显示任何内容。甚至没有带有 Hello 和 World 的两个<p>标签......
所有元素也已升级到最新版本。
可能是什么问题？以下是简化代码：
<!DOCTYPE html>
<html lang="fr">
<head>
<title>App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="icon" href="/resources/img/app_icon_no_text_big_trans-9ba078a979d5a6f438b108982a5fbc96.png" />
<script src="/resources/bower_components/webcomponentsjs/webcomponents-lite-b591b76678e2f5d584eff169fd0ff2f8.js"></script>
<link rel="stylesheet" href="/resources/css/style-081a2143eab1562ed0f2571c8a69aa2c.css" />
<link rel="import" href="/resources/bower_components/polymer/lib/utils/path-b668241452b073a2fea7a9da33eb822f.html" />
<link rel="import" href="/resources/bower_components/polymer/polymer-ff2cd4c34828a0ffe4677bf933618de4.html" />
<link rel="import" href="/resources/bower_components/neon-animation/web-animations-577638b27a2a77c751047a7b77cb49f2.html" />
<link rel="import" href="/resources/bower_components/iron-media-query/iron-media-query-68909d114753991b22e832a46c779989.html" />
<link rel="import" href="/resources/bower_components/paper-button/paper-button-72d61e146e55153140612cba12c5a0d2.html" />
<link rel="import" href="/resources/bower_components/paper-scroll-header-panel/paper-scroll-header-panel-4e1b613ae79a795c438f204034e2359c.html" />
<link rel="import" href="/resources/bower_components/paper-toolbar/paper-toolbar-392c19c3b918829cfe607f5f06be2b9e.html" />
<link rel="import" href="/resources/bower_components/iron-flex-layout/iron-flex-layout-classes-c4cb7663a6214c0ad5c41729bfef2a3d.html" />
<link rel="import" href="/resources/bower_components/paper-styles/paper-styles-b8ddb70e55605c10e863482164aaaf33.html" />
<link rel="import" href="/resources/bower_components/paper-input/paper-textarea-fc7a0e4378c4bbdb90def32c59e72e2f.html" />
<link rel="import" href="/resources/bower_components/paper-checkbox/paper-checkbox-4d9b1ae1de7400ef96ae83fc9d618091.html" />
<link rel="import" href="/resources/bower_components/paper-radio-group/paper-radio-group-ad71ba718a01c94ffa76055946ade51a.html" />
<link rel="import" href="/resources/bower_components/paper-dialog/paper-dialog-f2aefeaf573e039ecdca774350244730.html" />
<link rel="import" href="/resources/bower_components/paper-dropdown-menu/paper-dropdown-menu-cdd5e16fb048b585c2a4839591761617.html" />
<link rel="import" href="/resources/bower_components/paper-menu/paper-menu-ba00de0ca049d5c92e997c9f7c97d249.html" />
<link rel="import" href="/resources/bower_components/paper-item/paper-item-5439bb441f5b1d110a7e248595b05b38.html" />
<link rel="import" href="/resources/bower_components/paper-toast/paper-toast-36788cb33654ce8cdcd83b8a9805605f.html" />
<link rel="import" href="/resources/bower_components/paper-icon-button/paper-icon-button-8d30ba3b103e167984f97820112f4a4b.html" />
<link rel="import" href="/resources/bower_components/paper-dropdown-menu/paper-dropdown-menu-cdd5e16fb048b585c2a4839591761617.html" />
<link rel="import" href="/resources/bower_components/iron-icons/iron-icons-b2c3dcd68233e5e47f103df8ad3dc005.html" />
<link rel="import" href="/resources/bower_components/neon-animation/neon-animated-pages-efbf9e097eb34d2e2ae1d705cf8d0ca9.html" />
<link rel="import" href="/resources/bower_components/neon-animation/neon-animatable-cde611461ee6da675070fe79744df5b8.html" />
<link rel="import" href="/resources/bower_components/neon-animation/neon-animations-a0171c87c0fe88bdd8e270f1d1f39534.html" />
<link rel="import" href="/resources/bower_components/iron-ajax/iron-ajax-8a5a2954627628d15c9b743eaedb9ac1.html" />
</head>
<body>
<p>Hello</p>
<dom-module id="app-home">
<template>
<style include="iron-flex iron-flex-factors iron-flex-reverse iron-positioning iron-flex-alignment"></style>
<custom-style>
<style is="custom-style">
paper-scroll-header-panel {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
</style>
</custom-style>
<paper-scroll-header-panel fixed>
<paper-toolbar>
<paper-button on-tap="clickIntro">À propos</paper-button>
<paper-button on-tap="clickSignUp">Inscription</paper-button>
<paper-button on-tap="clickLogIn">Connexion</paper-button>
<span class="flex"></span>
<paper-menu-button vertical-align="top" horizontal-align="right" vertical-offset="72">
<paper-icon-button icon="icons:language" class="dropdown-trigger" alt="menu"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item on-tap="loadUrl" data-url="/home?lang=de">Deutsch</paper-item>
<paper-item on-tap="loadUrl" data-url="/home?lang=en">English</paper-item>
<paper-item on-tap="loadUrl" data-url="/home?lang=fr">Français</paper-item>
<paper-item on-tap="loadUrl" data-url="/home?lang=ru">Русский</paper-item>
</paper-menu>
</paper-menu-button>
</paper-toolbar>
<neon-animated-pages selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
<neon-animatable>
<div>Content 1</div>
</neon-animatable>
<neon-animatable>
<div>Content 2</div>
</neon-animatable>
<neon-animatable>
<div>Content 3</div>
</neon-animatable>
</neon-animated-pages>
</paper-scroll-header-panel>
</template>
<script type="text/javascript">
HTMLImports.whenReady(function() {
Polymer({
is : "app-home",
behaviors : [ Polymer.NeonAnimationRunnerBehavior ],
properties : {
selected : {
type : Number,
value : 0
},
user : {
type : Object,
value : {}
},
account : {
type : Object,
value : {
address : {}
}
}
},
ready : function(e) {}
});
});
</script>
</dom-module>
<app-home></app-home>
<p>World</p>
</body>
</html>
修改
事实证明问题是<paper-scroll-header-panel>，我知道它被弃用了，但我仍然期望它能够工作......
我将元素更改为使用<app-layout>，现在效果更好。动画似乎不起作用，但这不是问题。
答案 0 :(得分：0)
来自Polymer v2 documentation：
Polymer 2.0使用标准ES6类和标准自定义元素 v1定义元素的方法，而不是Polymer工厂方法。
您的app组件未正确定义Polymer v2。请参阅基本示例here。
然后你必须正确定义属性，行为和功能。请参阅链接的文档，其中的一切都在那里解释。