聚合物自定义元素不服从父html元素

Question

我正在使用Polymer 1.0 - 我的页面包含在paper-scroll-header-panel中，我试图将主工具栏的一部分转换为自定义元素（my-header）：

<paper-scroll-header-panel condenses keep-condensed-header>

    <!-- Main Toolbar -->
    <paper-toolbar class="tall layout horizontal" id="title-toolbar">
            <my-header id="myHeaderElement"></my-header>
    </paper-toolbar>

my-header自定义元素如下所示：

<dom-module id="my-header">
<style>

</style>
<template>
    <div class="bottom center horizontal layout" id="testing">
        <paper-button>Title</paper-button>
        <div class="flex"></div>
        <paper-button on-click="openLang">lang</paper-button>
    </div>
</template>
<script>
    Polymer({
        is: "my-header",
        behaviors: [
            Polymer.IronFitBehavior,
            Polymer.IronResizableBehavior
        ],
        ready: function() {
            this.fit();
        }
    });
</script>
</dom-module>

问题是布局属性bottom center horizontal layout未正确应用，因为它不遵守父<paper-toolbar>元素。 它呈现如下：

但它应该使用橙色框底部的文本和左侧的Title，中间的长柔性框和最右侧的LANG进行渲染。如果我将HTML从自定义元素中拉出并将其直接粘贴到index.html文件中，它就可以正常工作。

正如你所看到的，我在元素中添加了一些行为，并且已经在ready函数中调用它们但是无济于事。

我还尝试将整个<paper-toolbar>元素拉入自定义元素，但这只会在<paper-scroll-header-panel>的功能中产生更多问题。

如何让这个自定义元素保留在其父元素中并遵守格式化类/属性？

Answer 1

尝试在灯光元素中对元素应用类bottom。

<paper-toolbar class="tall layout horizontal" id="title-toolbar">
        <my-header class="bottom" id="myHeaderElement"></my-header>
</paper-toolbar>