聚合物自定义元素不服从父 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

尝试在 light dom 中的元素上应用 bottom 类。

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