Paper Scroll Header 面板不适用于自定义元素

Question

我是 Polymer 的新手。

问题： 我想在我的自定义元素中使用 paper-scroll-header-panel。正在尝试，但没有出现背景图像。更新：Problem with images on Imgur

文件: index.html, salon-header.html

index.html

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="salon-header.html">
<head>
<body>
    <salon-header></salon-header>
<body>
<html>

salon-header.html:

<dom-module id="salon-header">
    <link rel="import" href="bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/iron-media-query/iron-media-query.html">
    <link rel="import" href="bower_components/paper-scroll-header-panel/demo/sample-content.html">
    <template>
    <style>
        paper-scroll-header-panel {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: var(--paper-grey-200, #eee);
            --paper-scroll-header-panel-full-header: {
                background-image: url(bg3.jpg);
            }
            ;
            --paper-scroll-header-panel-condensed-header: {
                background-color: var(--google-yellow-500, #f4b400);
            }
            ;
        }
        paper-toolbar {
            background-color: transparent;
        }

        paper-toolbar .title {
            font-size: 40px;
            margin-left: 60px;
        }
        .content {
            padding: 8px;
        }
    </style>
    <paper-scroll-header-panel condenses>
        <paper-toolbar class="tall">
            <paper-icon-button icon="arrow-back"></paper-icon-button>
                <div class="flex"></div>
                <paper-icon-button icon="search"></paper-icon-button>
                <paper-icon-button icon="more-vert"></paper-icon-button>
                <div class="bottom indent title">Title</div>
            </paper-toolbar>
            <div class="content">
                <h3>Resize window to toggle between fixed header and scrolled header</h3>
                <sample-content size="100"></sample-content>
            </div>
        </paper-scroll-header-panel>
    </template>
</dom-module>

<script>
    Polymer({
        is: 'salon-header'
    });
</script>

这适用于单个文件。但我想要单独的文件来清理索引。

我试过了：

把webcomponentsjs只放索引而且只放salon-header。同样的所有这些进口。
在样式标签中添加了属性 salon-header.html 喜欢：（同样演示文件。）
已更改 dom-module 并包含模板标签。例子：我把模板内部或外部的样式。同样的方式导入里面模板和外部。

最后：在这个项目结构中（有问题），header没有背景图片，只有背景颜色#3f51b5。
当我尝试其他方式时，有时 header 不出现，有时 header 有透明背景（继承自 body：#eee）

我希望，我能解释一下自己。

对了，你可以和我分享你的Polymer经验，也可以给我推荐Polymer的技巧。谢谢

Answer 1

将 <style> 标签放在 <template> 元素之外。请参阅相关文档here。与添加外部样式表相同。您应该在 <template> 标签之前和 <dom-module>

标签内添加它

Paper Scroll Header 面板不适用于自定义元素

Paper Scroll Header Panel not working with Custom Element

polymer